CSS custom properties, also known as CSS variables, are like variables that can be used to store values that can be reused throughout a project.
For example, let's say you have a button that you want to use on multiple pages of your website. With CSS custom properties, you can define the button's color once, and then reference that color value on each page. This way, if you ever need to change the button's color, you can do it in one place, and the changes will be reflected everywhere.
CSS custom properties are a powerful tool for creating consistent, scalable, and reusable UI components. In many major companies, they use them to build and maintain UI component libraries and using CSS custom properties to create their own consistent UI libraries.
If you're not familiar with CSS custom properties, or if you want to learn more about how to use them, check out our guide to CSS custom properties.
What are Custom Properties?
CSS Custom Properties are a new feature that allows you to create variables in your CSS. This is similar to variables in programming languages, and can make your CSS more concise and easier to maintain.
How do Custom Properties work?
Custom Properties are declared using the --variableName syntax, and are set using the var() function. For example, you could create a variable called --mainColor and set it to #000:
--mainColor: #000;
You could then use this variable in your CSS like so:
.element {
color: var(--mainColor);
}
If you wanted to change the value of --mainColor, you could simply update the declaration at the top of your CSS file, and all elements using that variable would update automatically.
Why use Custom Properties?
Custom Properties can make your CSS more concise and easier to maintain. If you find yourself using the same value in multiple places throughout your CSS, you can create a variable for that value and use the variable instead. This way, if you ever need to update the value, you can do it in one place and all instances will update automatically.
#open-props.style
Open-props.style is a website that provides a library of CSS Custom Properties that you can use in your own CSS. The website includes a wide range of variables that you can use, including colors, sizes, and spacing values. You can also browse the source code of the website to see how the Custom Properties are used in practice.
Using a library of CSS Custom Properties can save you time and effort when building your own CSS. Instead of having to create your own variables, you can simply use the ones provided by open-props.style. This can make your CSS more concise and easier to maintain.
gradient-text
.gradient-text {
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
The CSS above uses a Custom Property called --gradient-1, which is set to a color gradient. The --webkit-background-clip and --webkit-text-fill-color properties are used to create a text effect that makes the text appear to be made of the gradient.
Getting started
Example file
This is an example file using Hype Style Caster, but custom properties run thus completely without the extension. Just plugging it here…
example_open_props.hype.zip (37,3 KB)