Thoughts

"The trouble with having an open mind, of course, is that people will insist on coming along and trying to put things in it."
Terry Pratchet, Diggers

CSS Text Gradients

LinkedIn

How to create gradients for your text, using only CSS.

View image
CSS Text Gradients | BlueSky Perth Custom Web + App Development

If you are a web designer who has, in the past, been lectured by your website implementer and SEO colleagues to ..

"make sure text has no gradients, only solid colours, cos we don't want to waste a HTTP request for an image when it could just be text. and also, SEO"

and have been afraid ever since to include text with gradients in your designs, well, in case you are not aware, you CAN have gradients on text - not just backgrounds, with just CSS.

Visit this CodePen by Adam Argyle to have a play.

Also, notice how the example makes use of HSL for their colours. You can read up about switching from HEX or RGB to HSL via this article by Sara Soueidan here .

Rizal Farok | BlueSky Perth Custom Web + App Development
Rizal Farok
4 years ago
design CSS/HTML

Recent thoughts