How to Create Gradient Titles As Seen on Apple’s iPad Pro Page

Use CSS to build them yourself

Dev by RayRay
Apr 7 · 3 min read
Image for post
Image for post
Source: Apple iPad Pro

I don’t know if you’ve seen the new iPad Pro — I think it’s awesome! But I want to talk about Apple product pages which, just like the new iPad Pro, I’m a big fan of. I noticed that they have some cool titles with a gradient background…

The first thing I did was try to select the text. In the early days, images were created with JavaScript via the <canvas> tag so the text would not be selectable. But surprisingly enough I could select the text!

I inspected how Apple made the gradient background. In this article, I’m going to teach you to do it too.

Background-clip: text

All you need to do is put a background image or gradient on the tag and a few other properties:

h1 {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-size: cover;
background-image: url('https://images.unsplash.com/photo-1557682224-5b8590cd9ec5?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=800&fit=max&ixid=eyJhcHBfaWQiOjF9');
}

We have to add a prefix, -webkit-background-clip, for Safari, or it won't work. For Chrome and Firefox, it will work perfectly fine.

Background Gradient

To make it more lightweight we can use a CSS background gradient:

h1 {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-size: cover;
background: linear-gradient(147deg, rgba(249,15,216,1) 0%, rgba(245,67,119,1) 26%, rgba(252,28,28,1) 50%, rgba(255,195,13,1) 75%, rgba(114,251,89,1) 100%);
}

There are a few generators that can help you make these gradients.

uiGradient

Image for post
Image for post

If you need inspiration for awesome gradients, uiGradient.com is a great resource.

CSS Gradient

Image for post
Image for post

CSS Gradient lets you create complex CSS background gradients with a simple editor. When you’re done you can copy the CSS and paste it into your code.

Example

I’ve created a demo with the CSS background-clip. If you need gradient images, check Unsplash for free images.

I want to include your examples here too! If you make something cool with the background-clip: text;, add the link in the comment so I can include them to inspire others.

Browser Support

Image for post
Image for post

According to caniuse.com, it’s supported in all major browsers, even since IE9.

Safari does not support -webkit-background-clip: text; for <button> elements. But you can put <span>inside <button> to get the same result. (Source: canisue.com).

Happy coding! 🚀

Conclusion

I have discovered that the browser programmers work hard to support all kinds of new CSS features. I hope this will gave you some new possibilities for your CSS toolbox.

I’m looking forwards to seeing all the cool things you build with it!

Better Programming

Advice for programmers.

Thanks to Zack Shapiro

Dev by RayRay

Written by

I write stories about Frontend Dev, JavaScript, Typescript, Angular, NodeJS, Serverless Functions, JAM Stack, FaunaDB, Netlify, Apple, iOS— https://byrayray.dev

Better Programming

Advice for programmers.

Dev by RayRay

Written by

I write stories about Frontend Dev, JavaScript, Typescript, Angular, NodeJS, Serverless Functions, JAM Stack, FaunaDB, Netlify, Apple, iOS— https://byrayray.dev

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store