Colors 2

Created: 2016-06-29 — modified: 2017-06-17 — 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,128),
        rgba(255,255,0,128),
        rgba(0,255,255,128),
        rgba(255,0,255,128)),
    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!)