39 CSS Custom Properties (variables) Examples

About a code

Text Grid with Mouse Interaction

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS Variables with Shadow Lists

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Playing with CSS Variables

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: randomcolor.js

About a code

Theming with Custom Properties

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

His Dark Materials TV Series Logo with CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Dark Mode with CSS Variables

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Fit Text with CSS Variables

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Random Bubble Scene Using Variable Scope

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

SVG Animation with Speech Recognition

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: just-animate.js, tweenmax.js

About a code

Dynamic CSS @keyframes with CSS Vanilla

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Sizing Areas with Custom Properties

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

About a code

Alerts - Custom Variables

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Custom Cursor with CSS Variables

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Expanding Search

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a 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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Responsive Infographic with CSS Variables and Flexbox Tricks

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Resizable Elements with Scoped CSS Variables & Touch Support

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Ripple Effect Using CSS Variables

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Hover Effect Using CSS Variables

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Scroll and Morph

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: basicScroll.js

About a code

Card Animation

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Splitting.js: CSS Vars for Split Words & Chars

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: splitting.css, splitting.js

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Thermostat with Form Elements & CSS Variables

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: conic-gradient.js

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Bar Chart in CSS Grid + Variables

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Spring Physics with CSS Variables

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: hammer.js

About a code

Psycho Glitch (CSS variables & @keyframes)

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

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Sunset/Sunrise Animation with CSS Variables

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Alex the CSS Husky Reactive

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: rx.css, rx.js, rx.dom.js

About a code

Cross-Browser Animated CSS Cube with Custom Properties

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Single Div Accordion (Animated with CSS Variables)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

News App Concept with CSS Variables

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: rxcss.css, rx.js, hammer.js, flipping.js

About a code

Dance of the Hexagons and Variables

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Parallax Scene with CSS Variables

Parallax scene with JS controlled CSS variables using basicScroll.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: basicscroll.js