Skip to main content

Generador de texto con gradiente CSS

Genera código CSS para aplicar gradientes al texto. Previsualiza colores, dirección y ajustes de rango en tiempo real.

Gradient Text
0%
100%
.gradient-text {
  background: linear-gradient(to right, #ec4899 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 48px;
  font-weight: 700;
}
Compartir herramienta
📖

Cómo usar

Step 1

Introducir texto

Introducir texto

Introduce el texto al que aplicar un gradiente

Step 2

Configurar gradiente

Configurar gradiente

Ajusta los colores, dirección y tipo del gradiente

Step 3

Copiar CSS

Copiar CSS

Copia el código CSS generado

Características

Vista previa en tiempo real

Previsualiza el texto con gradiente en tiempo real

Gradientes variados

Soporta gradientes lineales, radiales y cónicos con múltiples paradas de color

Preajustes incluidos

Aplica preajustes de gradientes populares con un solo clic

FAQ

Una técnica CSS que usa background-clip: text para aplicar fondos de gradiente al texto.