Cass-E Design

Design, Experiments, Games, Resources

CSS Variable Colourizer

The colouring on this site is done with CSS Variables, so here's a quick bit of Javascript to let us play with them ^^

If you don't care to read the link, here is the TLDR: CSS variables can effect parts of a calculation or gradient. With "normal" CSS you can only change the whole property. You can use them to do all kinds of things when you build a website. Today we're using it to play!

--main

--main is the background for the header, and most blocks/content with a solid background.

--main-accent

--main-accent is mostly used in gradients with --main

--main-text

--main-text is the colour of all plain text.

--secondary

The background colour for the site, header, and most body copy!

--secondary-accent

--secondary-accent is combined with --secondary to form the main background gradient.

--interactive

--interactive is the colour of links, buttons, inputs, and other clickables!

Next Post