CSS for gradient text:
Overused yet?

The CSS code for gradient text has become too simple—everyone’s doing it! Look at it! Fancy CSS has never been this simple:

h1.gradient-text {
	--to: orange;
	--from: purple;
	background-image: linear-gradient(-165deg, var(--to), var(--from) 75%, var(--from));
	color: transparent;
	-webkit-background-clip: text;
}

---

Developer notes

• Safari does not like block elements within an element with gradient text.
• Safari will not break inline gradient elements to new line.