console
<div class="text1">TEXT1</div>
<div class="text2">TEXT2</div>
<br>
<div class="text3">TEXT3</div>
<div class="text4">TEXT4</div>
<div class="text5">TEXT5</div>
<br>
<div class="bg1"></div>
<br>
<div class="bg2"></div>
@property --color1{
syntax: '<color>+';
inherits: false;
initial-value: green;
}
:root {
--color2: green;
}
.text1 {
--color1: 20px;
color: var(--color1);
}
.text2 {
--color2: 20px;
color: var(--color2);
}
@property --color3{
syntax: '<color>+';
inherits: true;
initial-value: green;
}
@property --color4{
syntax: '<color>+';
inherits: false;
initial-value: green;
}
:root {
--color3: red;
--color4: red;
--color5: green;
}
.text3 {
color: var(--color3);
}
.text4 {
color: var(--color4);
}
.text5 {
--color5: red;
color: var(--color5);
}
:root {
--start1: red;
--end1: green;
}
.bg1 {
width: 100px;
height: 100px;
background: linear-gradient(45deg, var(--start1), var(--end1));
transition: --start2 1s;
}
.bg1:hover {
--start1: yellow;
}
@property --start2 {
syntax: '<color>+';
inherits: false;
initial-value: red;
}
@property --end2 {
syntax: '<color>+';
inherits: false;
initial-value: green;
}
.bg2 {
width: 100px;
height: 100px;
background: linear-gradient(45deg, var(--start2), var(--end2));
transition: --start2 1s;
}
.bg2:hover {
--start2: yellow;
}