Direct link to the article 1 Element CSS Rainbow Gradient Infinity

1 Element CSS Rainbow Gradient Infinity

I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise. The gradient doesn't look like in the original illustration, as I chose to generate the rainbow logically instead of using the Dev Tools picker or something like that, but other than that, I think I got pretty close—let's see how I did that!
Avatar of Ana Tudor
Ana Tudor on (Updated on )

Transitioning Gradients

Direct Link

Keith J. Grant:

In CSS, you can’t transition a background gradient. It jumps from one gradient to the other immediately, with no smooth transition between the two.

He documents a clever tactic of positioning a pseudo element covering the element …

Avatar of Chris Coyier
Shared by Chris Coyier on

Easing Linear Gradients

Linear gradients are easy to create in CSS and are extremely useful. As we’ll go through in this article, we can make them visually much smoother by creating them with non-linear gradients. Well, non-linear in the easing sense, anyway! …

Avatar of Andreas Larsen
Andreas Larsen on (Updated on )