GeezerVison

The definition below creates a custom property named --myColor, defines it as a color property, specifies that it will inherit values from its parent elements, and its default value is lightgray.

Syntax of @property

@property --myColor {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}

Using the Custom Property

The CSS var() function is used to insert the custom property in CSS:

body {
background-color: var(--myColor);
}

Benefits of Using @property

The benefits of using @property is:

Data type checking: You must specify the data type of the custom property, such as <number>, <color>, <length>, etc. This prevents errors and ensures that custom properties are used correctly
Set default value: You must set a default value for the custom property. This ensures that if an invalid value is assigned later, the browser uses the default value as a fallback
Set inheritance behavior: You must specify whether the custom property will inherit values from its parent elements or not. This ensures that you will have full control over inheritance

CSS @property Example

The following example defines two custom properties: my-bg-color and my-txt-color.

The div, then uses the custom properties in the background-color and color properties:

Example

@property --my-bg-color {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}

@property --my-txt-color {
syntax: "<color>";
inherits: true;
initial-value: darkblue;
}

div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
color: var(--my-txt-color);
}

Try it Yourself »

Another @property Example

In the following example we use the default custom property on the <div> element. Then we override the custom property in class .fresh and class .nature (by setting some other colors), and it works perfectly fine:

Example

@property --my-bg-color {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}

div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
}

.fresh {
--my-bg-color: #ff6347;
}

.nature {
--my-bg-color: rgb(120, 180, 30);
}

Try it Yourself »

Avoid Error with Type Checking and Fallback Value

In the following example we set the custom property in class .nature to an integer. This is not valid, and the browser will use the fallback color, which is defined in the initial-value property (lightgray):

Example

Try it Yourself »

Use of the inherits Value

In the following example we will set the inherits value to false. This means that the custom property WILL NOT inherit values from its parent elements. Look at the result:

Example

@property --my-bg-color {
syntax: "<color>";
inherits: false;
initial-value: lightgray;
}

Try it Yourself »

The next example sets the inherits value to true. This means that the custom property WILL inherit values from its parent elements. Look at the result:

Example

@property --my-bg-color {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}

Try it Yourself »

Create Smooth Animation with @property

A complete new opportunity you can achieve with the @property rule, is to animate something that could not be animated before: Gradients. Look at the following example:

Example

Specify two custom properties for a gradient:

@property --startColor {
syntax: "<color>";
initial-value: #EADEDB;
inherits: false;
}

@property --endColor {
syntax: "<color>";
initial-value: #BC70A4;
inherits: false;
}

Try it Yourself »

CSS @property Rule

Property	Description
@property	Define custom CSS properties directly in the stylesheet without having to run any JavaScript

❮ Previous Next ❯

★ +1

W3Schools Full Access - your next career move

REMOVE ADS

Learn more about Adventure Mode›

Free account

Track your progress

XP earned 0 Day streak 0 Spaces 0 League —

New

Learn in Adventure Mode W3Schools Adventure App

Coding fundamentals as bite-sized lessons and challenges.

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

   

FORUM ABOUT CAMPUS

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookies and privacy policy.

Copyright 1999-2026 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.

GeezerVison

CSS Tutorial

CSS Advanced

CSS Flexbox

CSS Grid

CSS Responsive

CSS Cert

CSS SASS

CSS Examples

CSS References

CSS @property Rule

The CSS @property Rule

Syntax of @property

Using the Custom Property

Benefits of Using @property

CSS @property Example

Example

Another @property Example

Example

Avoid Error with Type Checking and Fallback Value

Example

Use of the inherits Value

Example

Example

Create Smooth Animation with @property

Example

CSS @property Rule

Track your progress

Learn in Adventure Mode W3Schools Adventure App

Contact Sales

Report Error

Top Tutorials

Top References

Top Examples

Get Certified