Inline CSS Variables

CSS custom properties, aka CSS variables allow us to define custom properties, or variables, to use in our CSS.

Let's say we want to define a custom color for a button. We could use the following CSS:

.custom-button {
  /* Other styles ommited... */
  --background-color: #bfdbfe;
  background: var(--background-color);
}

With the following HTML:

<button class='custom-button'>Click Me!</button>

It produces:

You can update the custom property by using inline styles:

<button class='custom-button' style="--background-color: lightgreen">Click Me!</button>

This could be very useful in some cases. For example, you could have a grid component and you may want to specify the number of columns and rows with CSS variables:

<div class="grid" style="--columns: 4; ---rows: 8">...</div>