Gerador de Texto Gradiente CSS - DevToolBox

Create beautiful gradient text effects with CSS. Live preview, multiple colors, angle control, font size and weight. Copy ready-to-use CSS code. Gratuito, sem cadastro.

Settings

Preview Text

Color 1

Color 2

Color 3 (optional)

Angle: 135°

Font Size: 48px

Font Weight: 800

Presets

Gradient Text

CSS Code

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: 800;
}

What is CSS Gradient Text?

CSS Gradient Text Generator creates colorful gradient effects on text using CSS background-clip and -webkit-text-fill-color properties. Customize colors, angles, font size, and weight with real-time preview and copy-ready CSS code.

𝕏 Twitter in LinkedIn

Avalie esta ferramenta

3.9 / 5 · 209 avaliações

More Tools

🪟Gerador CSS Glassmorfismo 🫧Gerador CSS Neumorfismo 🌈Css Gradient Generator 🌓CSS Shadow Generator

Fique atualizado

Receba dicas de dev e novos ferramentas semanalmente.

Sem spam. Cancele a qualquer momento.

Enjoy these free tools?

☕Buy Me a Coffee

How to Use

Enter your preview text
Choose gradient colors (2 or 3 colors)
Adjust the angle, font size, and weight
Try preset color combinations
Copy the CSS code

Use Cases

Create eye-catching headings for websites
Design gradient logos and titles
Add visual interest to landing pages
Build colorful text effects for marketing pages

FAQ

How does gradient text work in CSS?

It uses background with a gradient, then background-clip: text and -webkit-text-fill-color: transparent to show the gradient through the text shape.

Is gradient text supported by all browsers?

Yes, it works in all modern browsers. The -webkit- prefix ensures compatibility with older versions of Chrome and Safari.

Can I use more than 2 colors?

Yes, this generator supports up to 3 colors. The third color is optional.