Generatore Testo 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, nessuna registrazione.

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

Valuta questo strumento

3.9 / 5 · 209 valutazioni

Altri strumenti

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

Resta aggiornato

Ricevi consigli dev e nuovi strumenti ogni settimana.

Niente spam. Cancella quando vuoi.

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.