How to Create Gradient Titles As Seen on Apple’s iPad Pro Page
Use CSS to build them yourself
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…
<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.
All you need to do is put a background image or gradient on the tag and a few other properties:
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.
To make it more lightweight we can use a CSS background gradient:
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.
If you need inspiration for awesome gradients, uiGradient.com is a great resource.
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.
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.
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!