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 )

Conical Gradients in CSS

When I create filters, shadows, transformations or gradient backgrounds in CSS, it feels amazing. Who would have thought CSS would come this far. No need to use images for any of that stuff. I can almost hear the browser telling …

Avatar of Shankar Cabus
Shankar Cabus on (Updated on )