Hi Mike here, in the tutorial I’m going to show you how to add Gradient Color to Text. This is a great effect for titles or headings on your website and with the css snippets I’m going to share with you it is easy.
So on this page I have two examples the first one is a Gradient fill and the second is a Gradient outline, I thought that these would go together well.
So lets work on the Gradient fill first and right click on the text and choose inspect to open our developers tools. I’m using Chrome, but this is also available in most other browsers, I just prefer Chrome.
Now we want to see what type of heading this is and the class. As you can see it’s an H1 with the class of “one”. For your site you may also want to find the nearest parent ID so you can ensure the css is only applied to the elements to wish, in this case the ID is also “one”
If you only want this to work on one page then you can also add the page ID, just so you don’t get any surprises down the road.
Ok, so now lets find a Gradient Color, now there are a lot of Gradient generators online but I like using “uigradients.com” because they have already put together colors that blend well for you to pick from.
If you click “show all Gradients” you can find one you like and then in the top right click the code symbol and then copy the css for it. Easy right?
Now to add your css you can click the WordPress customize button in the admin toolbar and then additional css. Now you may have other places to add css available in your theme, and you can use which ever you are comfortable with, but this is one is available in any WordPress theme so I will demonstrate here.
Now we will add our tag and class and our background, but we only want the color on the text and not in the background so we will add “background clip” but now the font-color is covering the background color, so to correct we will add “text-fill-color” “transparent”
And there you go, Gradient filled text, if your happy with it go ahead and click publish.
Now lets try doing a Gradient outline on the next line, so we will check our tag and class, this time it’s H1 with the class “two”, and we will add our background.
And then our background clip, but this time we are going to add a “text-stroke” to create the outline.
When you add the text-stroke you can choose how big you would like it, so lets try 14px, now that looks pretty good with the black text, but lets try making the text color the same as the background.
There, I kind of like that better, but it’s up to you.
Well that is it pretty easy right? I will post the css down below for you to use, and if you found this helpful leave a comment below and subscribe.
So until next time, take care.
h1.one {
background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1.two {
background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
-webkit-background-clip: text;
-webkit-text-stroke: 14px transparent;
color: #F4F4F4 !important;
}