Colors 2

Created: — modified: — tags: css

A CSS-only version of fancy 2D background gradient

I've noted before how to create a fancy 2D gradient using javascript. That's fancy. And a lot of code. And it makes sense in some cases. In another cases one might as well consider this simple CSS style:

background:
    linear-gradient(
        rgba(255,0,255,0.5),
        rgba(255,255,0,0.5),
        rgba(0,255,255,0.5),
        rgba(255,0,255,0.5)),
    linear-gradient(to right, #f00, #0f0, #00f);

You can see it applied to <body> element on this very page. Maybe not as nice, but it definitely works!

Inspired by this (archived) article, but has next-to-nothing in common. (Although it worth reading, too!)