Awesome CSS Variables

Making a list of awesome CSS Variable resources and libraries (and dashing it twice!)

Guides

A Strategy Guide To CSS Custom Properties – This article outlines the basics of using CSS Variables by comparing them to variables found in pre-processors such as Sass – by Michael Riethmuller
CSS Custom Properties and Theming – This post shows how CSS Variables can be used to dynamically theme websites. This is a common problem when "white labeling" digital content – by Chris Coyier
Using CSS custom properties (variables) – This is the definitive guide for getting started with CSS Variables. Like most of their other content, MDN continues to be the best place to learn in depth how web technology works short of reading the actual specifications.
Learn CSS Variables for free – This free video series takes the viewer through the basics of CSS Variables, how to use them in theming, and how to change them through JavaScript – by Per Harald Borgen
Individualizing CSS Properties with CSS Variables – This article is an exploration of using CSS Variables in different CSS Properties such as animation-play-state, transforms, and in color channels. As usual, a great and thoughtful read – by Dan C Wilson

CSS Custom Properties and Theming – This post shows how CSS Variables can be used to dynamically theme websites. This is a common problem when "white labeling" digital content – by Chris Coyier

Making Custom Properties (CSS Variables) More Dynamic – This article explains how changing CSS Variables' values using JavaScript and using CSS inheritence can result in very dynamic webpages – by Dan C Wilson

CSS Variables: var(--subtitle) – This talk from CSSConf.Asia 2016 shows a variety of ways to use CSS Variables as well as well as a deep dive into the syntax – by Lea Verou
Interactive Web Apps with CSS Variables – This meetup talk from September 2018 shows advanced CSS Variable techniques and how to use them – by Christopher Wallis

Easy Theming w/ the Color Picker (CodePen) – Tick the color you want to change the theme. The theme color switching is controlled via JS and simply changes a root CSS Variable's hex value – by Daryn St. Pierre
CSS Vars – A Collection by Shaw (CodePen Collection) – A collection of pens using CSS Variables – by Stephen Shaw
Megaman READY! (CodePen) – Reproduces the famous "READY" from the Megaman games without using JavaScript. This uses CSS Grid extensively and CSS Variables for timing and changing the end point of the exploding blocks – by Christopher Wallis
Splitting: CSS vars for split words & chars (CodePen) – Examples of text effects built with Splitting: https://splitting.js.org. These animations/transitions are all done with CSS after Splitting adds helper spans & CSS Variables – by Stephen Shaw
The Charmeleon from Null Island (CodePen) – This endangered chameleon species is usually spotted in the dense forests of Null Island. With special abilities like camouflaging to background colors and reacting to DOM hovers, it has an appetite for Defaultae Pointericus insects. Experimenting with the new lottie-api, CSS Variables and cursor possibilities – by Hernan Torrisi
Custom properties – A collection by Goiblas (CodePen Collection) – A collection with examples of use – by Jesús Olazagoitia

Flipping – A library (and collection of adapters) for implementing FLIP transitions. It has multiple strategies for completing FLIP transitions. The CSS adapter supports using CSS Variables – by David Khourshid
GSAP – "Ultra high-performance, professional-grade animation for the modern web." Among animation engines, the team claims it to be the fastest and the most backward compatible – by Greensock
Just Animate – A general animation engine that uses the Web Animation API for style based animation and has its own animation engine with an extensible plugin system for animating SVG, CSS variables, etc – by Christopher Wallis

CSSPlus – A family of CSS reprocessing plugins that give you more power when writing CSS. It's called “CSSplus” because it's CSS plus JavaScript, the method most of these plugins use to add power to CSS is by having JavaScript dynamically update CSS variables with information about the browser and elements – by Tom Hodgins

Splitting – A JavaScript microlibrary designed to split (section off) an element in a variety of ways, such as words, characters, child nodes, and more! Most Splitting methods utilize a series of s populated with CSS variables and data attributes unlocking transitions and animations that were previously not feasible with CSS – Stephen Shaw

BasicScroll – Standalone parallax scrolling for mobile and desktop with CSS variables. basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want. Highly inspired by skrollr and Reactive Animations with CSS Variables – by Tobias Reich
ScrollOut – Install ScrollOut and decorate elements with the data-scroll attribute. As elements become visible, data-scroll will be set to in and when elements are scrolled out they will be set with out. Add your own CSS or JS to make a big impression when things come into view. That's it! Use the cssProps to animate based on scroll position and to do parallax – by Christopher Wallis

Lengthy – A JavaScript microlibrary (1.2kb min, 0.7kb gzipped) to get the length of SVG shapes. The length will automatically be added to the element as a CSS Var to make it easy to do CSS animations of SVG stroke-dashoffset for the wonderful line drawing SVG technique and other interesting animations – Stephen Shaw

IE11CustomProperties – A lightweight polyfill to enhance IE11 with CSS variables. Features: dynamic added content, respecting the cascade, pseudo-classes like :hover, js-integration (style.setProperty('--x','y')), and many more – Tobias Buschor

To the extent possible under law, Christopher Wallis has waived all copyright and related or neighboring rights to this work.