Text gradients look amazing and modern.

Fortunately, they are surprisingly easy to make with CSS.

First of all, there’s no such property as text-gradient in CSS.

Instead, we can make text gradients by combining the properties background-image/background, background-clip, and setting the text color to transparent.

The way it works, is, you set color: transparent, then a background to the element, then you clip the background to the element’s text.

To add gradients to your text with CSS, you just need three lines of code.

Adding gradient to texts with CSS

color: transparent;
background-clip: text;
-webkit-background-clip: text;

(the -webkit- prefix is for Safari support).

Explanation:

• background: linear-gradient(...): Defines the gradient colors and direction..
• -webkit-background-clip: text;: Ensures the gradient is clipped to the shape of the text.
• color: transparent;: Makes the text transparent, allowing the gradient to show through.

Since the color is transparent, and the background is clipped to the text, the text gets the same color as the element’s background.

That’s how you can add gradients to texts with CSS.

Here’s an example:

.example {
	color: transparent;
	background: linear-gradient(19deg, #21d4fd 0%, #b721ff 100%);
	background-clip: text;
	-webkit-background-clip: text;
}

Adding gradients to texts with CSS Pro

If you’re a CSS Pro user, adding gradient text becomes even easier. With the Visual Editor:

1. Select the Element: Click on the element you want to style.
2. Apply Gradient: Use the Background editor to create your beautiful gradient, or use one of the 300+ background presets.
3. Toggle “Use background as text color” option: And CSS Pro will adjust the code accordingly.
4. Preview and Export: Instantly see your changes live and copy the generated CSS.

Add gradients to texts with a single click using CSS Pro.

Best practices

• Use gradients sparingly to avoid overwhelming your design.
• Ensure sufficient contrast between the gradient colors for better readability.
• Test your design on various devices to ensure consistent rendering (especially Safari, which requires the -webkit- prefix to the background-clip property).