Articles Tagged

repeating-linear-gradient()

The repeating-linear-gradient() function creates a repeating gradient that places colors along a straight line and smoothly transitions between them. We define a section of the gradient, which then gets repeated until it fills the available space.

Juan Diego Rodríguez on Sep 23, 2025

gradients

CSS Tricks That Use Only One Gradient

CSS gradients have been so long that there’s no need to rehash what they are and how to use them. You have surely encountered them at some point in your front-end journey, and if you follow me, you also …

Temani Afif on Oct 11, 2024 Updated on Mar 14, 2025

box-shadow gradients shadow

Different Ways to Get CSS Gradient Shadows

It’s a question I hear asked quite often: Is it possible to create shadows from gradients instead of solid colors? There is no specific CSS property that does this (believe me, I’ve looked) and any blog post you find about …

Temani Afif on Feb 10, 2023

gradients hover mask scale

A Fancy Hover Effect For Your Avatar

Do you know that kind of effect where someone’s head is poking through a circle or hole? The famous Porky Pig animation where he waves goodbye while popping out of a series of red rings is the perfect example, and …

Temani Afif on Feb 3, 2023

gradients mix-blend-mode multiple backgrounds transition

Animated Background Stripes That Transition on Hover

How often to do you reach for the CSS background-size property? If you’re like me — and probably lots of other front-end folks — then it’s usually when you background-size: cover an image to fill the space of an entire …

Preethi on Dec 8, 2022

background-clip conic gradients gradients mix-blend-mode radial-gradient

Making Static Noise From a Weird CSS Gradient Bug

What I will be doing here is kind of an experiment to explore tricks that leverage a bug with the way CSS gradients handle sub-pixel rendering to create a static noise effect — like you might see on a TV with no signal.

Temani Afif on Nov 18, 2022

conic gradients gradients linear-gradient radial-gradient

Some Links About CSS Gradients

Every once in a while, the blogging zeitgiest seems to coalesce around a certain topic and it’s like the saved articles in my bookmarks folder are having a conversation. The conversation sitting in there now is all about CSS Gradients …

Geoff Graham on Nov 2, 2022

clip-path gradients hover mask outline transition

Fancy Image Decorations: Outlines and Complex Animations

We’ve spent the last two articles in this three-part series playing with gradients to make really neat image decorations using nothing but the <img> element. In this third and final piece, we are going to explore more techniques using the …

Temani Afif on Oct 28, 2022 Updated on Jun 19, 2023

clip-path gradients hover linear-gradient mask radial-gradient

Fancy Image Decorations: Masks and Advanced Hover Effects

Welcome to Part 2 of this three-part series! We are still decorating images without any extra elements and pseudo-elements. I hope you already took the time to digest Part 1 because we will continue working with a lot of gradients …

Temani Afif on Oct 21, 2022 Updated on Oct 28, 2022