Text with Linear Gradient Background

Sometimes we need a linear gradient background to be applied for a text. This can be by using the background-clip: text CSS property.

background-clip: text makes the background clipped beneath the text only, rather than the background of the container.

div {
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(to right, red , yellow, green);
	color: transparent;
}

Note that the color of the text should be made transparent for this to work.

Demo

HTML & CSS

<div id="demo-text">This Is A Sample Text</div>

#demo-text {
	font-size: 80px;
	font-weight: 700;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	background-image: linear-gradient(to right, red , yellow, green);
}

Browser Compatibility

All major browsers have support for background-clip: text, either directly or through a prefix.

Firefox & Edge support the background-clip: text property, while Chrome & Safari support the prefixed -webkit-background-clip: text property.