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 is the background for the header, and most blocks/content with a solid background.


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


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


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


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


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

Next Post