DeveloperActualizado 19 de julio de 2026

Gradient Text Generator

Create beautiful CSS gradient text with live preview. Customize colors, direction, and easily copy the CSS or Tailwind code. Se ejecuta completamente en su navegador: no se envían datos a ningún servidor, no se requiere cuenta y es completamente gratis.

Gradient Text Preview

Text content

Direction

Colors (2/5)

Presets

CSS Code

.gradient-text {
  background: linear-gradient(to right, #4f46e5, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

Tailwind CSS (Arbitrary Value)

<!-- Tailwind equivalent using custom arbitrary values -->
<span class="bg-[linear-gradient(to right, #4f46e5, #ec4899)] bg-clip-text text-transparent">
  Gradient Text Preview
</span>

Compatibility: Gradient text uses standard CSS properties that are supported in all modern browsers (Chrome, Safari, Firefox, Edge).

La guía completa para texto degradado CSS

Atrás quedaron los días en que la tipografía web se limitaba a colores sólidos. El texto degradado CSS es una de las formas más efectivas de llamar la atención sobre un título, un llamado a la acción o un logotipo. Al combinar varios colores a la perfección en los personajes, puedes crear interfaces modernas, vibrantes y atractivas que se sienten premium. Nuestro generador de texto degradado CSS gratuito le permite diseñar hermosos efectos de texto visualmente y obtener el código CSS o Tailwind exacto que necesita.

Cómo funciona el texto degradado CSS

Aplicar un degradado al texto no es tan simple como color: linear-gradient(...). En cambio, requiere una combinación inteligente de tres propiedades CSS que actúen juntas:

imagen de fondo: Primero, crea el degradado real (lineal, radial o cónico) y lo aplica como fondo del elemento de texto.
clip de fondo: texto: Esta es la propiedad mágica. Le indica al navegador que recorte la imagen de fondo exactamente a la forma del texto de primer plano.
color: transparente: Finalmente, hace que el color real del texto sea transparente. Esto permite que el degradado del fondo recortado brille a través de las letras.

La implementación estándar de CSS

Aquí está el bloque CSS estándar generado por nuestra herramienta. Tenga en cuenta el uso del prefijo de proveedor -webkit- en background-clip y text-fill-color. A pesar de ser CSS estándar ahora, muchos navegadores todavía requieren el prefijo webkit para que este efecto específico se reproduzca perfectamente.

.gradient-text {
imagen de fondo: gradiente lineal (a la derecha, #ff7e5f, #feb47b);
-webkit-fondo-clip: texto;
clip de fondo: texto;
color: transparente;
-webkit-text-fill-color: transparente;
}

Texto degradado con Tailwind CSS

Si está utilizando el marco CSS Tailwind, el texto degradado es increíblemente fácil de lograr usando clases de utilidad. No es necesario escribir CSS personalizado. Nuestro generador proporciona este código automáticamente, que se ve así:


Hola mundo

Mejores prácticas de diseño

Úselo con moderación: el texto degradado tiene un gran impacto. Resérvelo para títulos principales (H1) o eslóganes de marketing breves y contundentes. Aplicar un degradado a un párrafo completo lo hace completamente ilegible.
Cuide su contraste: asegúrese de que la parte más clara de su degradado todavía tenga suficiente contraste contra el fondo de su página. Si su página es blanca, evite usar amarillos pálidos o grises claros en el degradado del texto. (Puedes verificar esto con nuestro Comprobador de contraste de color).
Anima el degradado: puedes crear un hermoso efecto fluido haciendo que el tamaño del fondo sea mayor que el texto (por ejemplo, fondo-tamaño: 200% automático) y usando una animación de fotograma clave CSS para mover la posición de fondo hacia adelante y hacia atrás.

Utilice nuestro generador de texto degradado gratuito para crear titulares llamativos al instante. Si necesita inspiración para los colores, pruebe nuestro Generador de paleta de colores.

Cómo utilizar el Gradient Text Generator

1
Enter Your Text
Type the text you want to stylize into the text input field. The preview updates instantly.
2
Choose Colors
Pick your start and end colors. You can add up to 5 color stops for complex gradients or select from predefined presets.
3
Set the Direction
Choose the direction of the gradient flow, such as left to right, top to bottom, or diagonal.
4
Copy the Code
Click to copy the standard CSS or the Tailwind CSS code directly into your project.

Preguntas Frecuentes

How does CSS gradient text work?

Gradient text is achieved using three CSS properties: first, setting a background gradient, then applying `background-clip: text` (or its `-webkit` prefixed version) so the background only shows where the text characters are, and finally making the actual text color transparent so the background shines through.

Is gradient text supported in all browsers?

Yes, this technique is universally supported in all modern browsers including Chrome, Firefox, Safari, and Edge. The `-webkit-background-clip: text` prefix is still required for maximum compatibility, which our generator includes automatically.

Can I animate gradient text?

Yes! While you cannot directly animate background-image gradients in CSS, you can animate the `background-position`. By making the background larger than the text (e.g., `background-size: 200% auto`) and animating the position, you can create a beautiful flowing color effect.

Why does my gradient text look weird on multiple lines?

By default, the gradient stretches across the entire block. If you want the gradient to apply to each line individually instead of the whole block, you may need to use `display: inline` on the text element.