Saturday, April 20

Tag: Gradient Infinity

1 Element CSS Rainbow Gradient Infinity
CSS Tricks

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 original gradient infinity. After four hours and some twenty minutes, of which over four hours were spent on tweaking positioning, edges and highlights... I finally had the result below: My version of the rainbow gradient infinity. 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!   Markup As you've probably already guessed from the title, the HTML is just one element: <div class='∞'></div> Styling Deciding on the approach The first idea that migh...