DEV Community

Cover image for Gradient Texts with Tailwind CSS
Altug Gurkaynak
Altug Gurkaynak

Posted on

Gradient Texts with Tailwind CSS

Gradients are great. Right?
And when it comes to Tailwind CSS it's also great. Right!

So lets make a nice gradient header with Tailwind 🎯

At the example below, I made a simple <h1> with Tailwind codes only.

Please open the pen in full mode or just click here to see it larger (for desktops).

Lets Breat It Down

max-w-screen-md πŸ‘‰ width of the h1
mt-8 πŸ‘‰ margin-top: 2rem
mx-auto πŸ‘‰ margin-left: auto; margin-right: auto to center the h1
text-center πŸ‘‰ text-align: center
text-7xl πŸ‘‰ font-size: 4.5rem
font-bold πŸ‘‰ font-weight: bold
bg-clip-text πŸ‘‰ crop the element’s background to match the shape of the text
text-transparent πŸ‘‰ making text transparent to clip-text work on gradient
bg-gradient-to-r πŸ‘‰ the gradient from left to right
from-orange-600 πŸ‘‰ starting color
to-purple-600 πŸ‘‰ end color

I πŸ’™ Tailwind CSS

Top comments (0)

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.