CSS Variables

CSS variables var( ) is a CSS function that can be used to insert the value of a custom property.

h2 {
  border-bottom: 3px #00FFFF;

.container {
  color: #00FFFF;
  background-color: #00FFFF;
  padding: 15px;

CSS Variables-values



A custom property’s name represented by an identifier that starts with two dashes. Custom properties are solely for use by authors and users; CSS will never give them a meaning beyond what is presented here.


The custom property’s fallback value, which is used in case the custom property is invalid in the used context. This value may contain any character except some characters with special meaning like newlines, unmatched closing brackets, i.e. )], or }, top-level semicolons, or exclamation marks.

CSS Variable Function-syntax

The var() function is used to insert the value of a CSS variable.

nameThe variable name (must start with two dashes)
valueThe fallback value (used if the variable is not found)
.container {
  color: var(--darkorchid);
  background-color: var(--white);
  padding: 17px;