CSS Tricks That Use Only One Gradient
October 14, 2024
In this article, we are not going to make complex stuff with CSS gradients. Instead, we’re keeping things simple and I am going to walk through all of the incredible things we can do with just one gradient.
Only one gradient? In this case, reading the doc should be enough, no?
No, not really. Follow along and you will see that gradients are easy at their most basic, but are super powerful if we push them — or in this case, just one — to their limits.
Since the web’s earliest days, developers have unearthed ways of doing things that were never explicitly built into the platform.
These often reveal desire lines (for years folks used image replacement techniques to replace set with an image to enable the use of typography that the platform didn’t then support in an accessible way).
Here with just a single CSS Gradient Temani Afif achieves all manner of sophisticated effects.
