# How to Create Gradient Titles Like Apple’s iPad Pro Page **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 `` 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: "" ``` 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 If you need inspiration for awesome gradients, [uiGradient.com](https://uigradients.com/#MegaTron) is a great resource. #### CSS Gradient [CSS Gradient](https://cssgradient.io/) 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 According to [caniuse.com](http://caniuse.comhttps//caniuse.com/#feat=background-img-opts), it’s supported in all major browsers, even since IE9. Safari does not support `-webkit-background-clip: text;` for `