:root {
	/* gradients */
	--gradient-prop-1: conic-gradient(yellowgreen 40%, gold 0deg, gold 75%, #f06 0deg);
	--gradient-prop-2: linear-gradient(90deg, black 25%,black 50%, blue 50%, blue 75%);
	--gradient-prop-3: radial-gradient(cyan 0%, transparent 20%,transparent 30%, salmon 40%);
	--gradient-prop-4: repeating-conic-gradient(from 0deg, yellowgreen 40deg, gold 60deg,gold 75deg, #f06 0deg);
	--gradient-prop-5: repeating-linear-gradient(90deg, black 25%,black 50%, blue 50%, blue 75%);
	--gradient-prop-6: repeating-radial-gradient(red 0,red 8%, yellow 8%,yellow 16%, blue 16%, blue 24%);

	--hwb: rgb(230, 94, 26);
}

@supports (background: linear-gradient(red 0%, red 0% 1%, red 2%)) {
:root {
	--gradient-prop-2: linear-gradient(90deg, black 25% 50%, blue 50% 75%);
}
}

@supports (background: radial-gradient(red, red 1px 2px, red 3px)) {
:root {
	--gradient-prop-3: radial-gradient(cyan 0%, transparent 20% 30%, salmon 40%);
}
}

@supports (background: repeating-conic-gradient(from 0deg, red 0deg, red 0deg 1deg, red 2deg)) {
:root {
	--gradient-prop-4: repeating-conic-gradient(from 0deg, yellowgreen 40deg, gold 60deg 75deg, #f06 0deg);
}
}

@supports (background: repeating-linear-gradient(red 0%, red 0% 1%, red 2%)) {
:root {
	--gradient-prop-5: repeating-linear-gradient(90deg, black 25% 50%, blue 50% 75%);
}
}

@supports (background: repeating-radial-gradient(red, red 1px 2px, red 3px)) {
:root {
	--gradient-prop-6: repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);
}
}

@supports (color: hwb(0 0% 0%)) {
:root {

	--hwb: hwb(20 10% 10%);
}
}
