Collection of free CSS custom property (variables) code examples from Codepen and other resources

Text Grid with Mouse Interaction

CSS Variables with Shadow Lists

A couple examples of how CSS variables can hold some or all of a list of box-shadows.

Playing with CSS Variables

Theming with Custom Properties

His Dark Materials TV Series Logo with CSS

Dark Mode with CSS Variables

Fit Text with CSS Variables

Random Bubble Scene Using Variable Scope

SVG Animation with Speech Recognition

Dynamic CSS @keyframes with CSS Vanilla

Sizing Areas with Custom Properties

Illustrates a technique to control the sizing of different areas on your website using CSS custom properties.

Using Locally Scoped Custom Properties

By using locally scopped properties, we can easily style individual components. The title here has a class of .title, as do the h2 for each of the following sections. Because I'm using locally scoped properties to style them, I don't even need to select them, I only have to select the parent and change the value of the property. There is no need to define them in the global scope, as they aren't global properties. For example, the --button-scale has no need to be defined globally, as it's only used within my buttons. Working like this can help keep things nice and organized, yet very easy to make changes without getting into specificity wars or the need to go wild with extra classes to make minor modifications.

Alerts - Custom Variables

CSS Theme Switcher

A user can click or tap on a button to reverse the colors of the site from dark text on a light background to light text on dark. There may be subtle changes too, like switching to a different highlight color to maintain sufficient contrast with the background.

Custom Cursor with CSS Variables

Custom cursor with CSS variables and a snap animation that focuses the element you're currently hovering.

Expanding Search

Duotone Filtering with CSS Variables

Was playing with mix-blend-mode to create different duotone filters. Then I thought it might be cool to have a handy selector wheel to try out different filters. So here it is! A duotone filtering tester using CSS variables. The inner ring is the lightening color whilst the outer is the darkening color. To change the colors, adjust the colors variable in the pug code.

There's No Place Like Home

A CSS-only house based off of the Pokemon Gameboy art featuring some JS and CSS variables to change its colours.

Responsive Infographic with CSS Variables and Flexbox Tricks

Resizable Elements with Scoped CSS Variables & Touch Support

Ripple Effect Using CSS Variables

Hover Effect Using CSS Variables

Scroll and Morph

Uses the basicScroll parallax scroll library to morph text on scroll. Morphing is accomplished through CSS variables & CSS clip-path.

Card Animation

Card animation with CSS and HTML and some click events, CSS variables.

Splitting.js: CSS Vars for Split Words & Chars

These animations/transitions are all done with CSS after Splitting adds helper spans & CSS Variables.

CSS Custom Pproperty Hover Effects

Adding a cool hover/focus effect to icons from the Orion Icon Library with the help of CSS custom properties.

Thermostat with Form Elements & CSS Variables

Morphing Fullscreen Navigation Menu [~60fps animation]

Performant fullscreen navigation menu transition using javascript and custom properties (css variables). Ideal for mobile in terms of reachability.

Card UI Skeleton Screen

This creates a skeleton of a card component using CSS custom properties to draw different gradients on the background-image. Skeleton screens can be used to improve perceived performance while loading.

Bar Chart in CSS Grid + Variables

Spring Physics with CSS Variables

Psycho Glitch (CSS variables & @keyframes)

The glitch effect, recreated with animated CSS custom properties. Pure CSS.

Sunset/Sunrise Animation with CSS Variables

Alex the CSS Husky Reactive

Cross-Browser Animated CSS Cube with Custom Properties

Single Div Accordion (Animated with CSS Variables)

News App Concept with CSS Variables

Dance of the Hexagons and Variables

Using CSS variables and transitions to manipulate separate transform functions individually.

Parallax Scene with CSS Variables

Parallax scene with JS controlled CSS variables using basicScroll.