DEV Community

Phong Duong
Phong Duong

Posted on • Originally published at phongduong.dev on

Create gradient text

You can create text with a single color or combine multiple colors to create gradient text with CSS. In this tutorial, I will show you how to create gradient text using background-clip CSS property.

background-clip sets an element's background extends underneath its border box, padding box, content box or within the foreground text. You will use text value for this property in this tutorial.

You create a paragraph first.

p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Enter fullscreen mode Exit fullscreen mode

The paragraph needs a background with a gradient color. You set the background-clip property to text value. It is the main point of this tutorial.

p {
  background-image: repeating-linear-gradient(#01fd69 2rem, tomato 3rem);
  background-clip: text;
}
Enter fullscreen mode Exit fullscreen mode

You won't see the color of the text changes because you only set the background and the paragraph is still using the default color. To change it, you set the color of the paragraph to transparent value.

p {
    background-image: repeating-linear-gradient(#01fd69 2rem, tomato 3rem);
    background-clip: text;
    color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

Now you can see the text with two colors: green and tomato. There is an interesting thing that you can create gradient text for a specific element of the text like the first line or the first letter with CSS pseudo-element

To create gradient text for the first line of the text you change the CSS code above

p::first-line {

}
Enter fullscreen mode Exit fullscreen mode

For the first letter

p::first-letter {

}
Enter fullscreen mode Exit fullscreen mode

This is full code of the project. I create three paragraphs for three examples.

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay