Generador de Texto con Degradado CSS - Efectos de Texto Coloridos

Genera hermosos efectos de texto con degradado CSS con una vista previa visual en vivo

Herramientas CSS

Tool

Text

Font Size (48px)Font Weight

Color 1

#6366f1

Color 2

#ec4899

Direction

Gradient Text

CSS

.gradient-text {
  font-size: 48px;
  font-weight: 700;
  background: linear-gradient(to right, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Cómo usar

1Escribe tu texto en el campo de vista previa
2Elige los colores de inicio y fin del degradado
3Ajusta el ángulo o dirección del degradado
4Copia el código CSS generado y aplícalo a tu proyecto

Preguntas frecuentes

El texto con degradado CSS usa la técnica background-clip: text. Se establece un degradado como fondo, luego el fondo se recorta a la forma del texto usando -webkit-background-clip: text y color: transparent.

El texto con degradado es compatible con todos los navegadores modernos, incluidos Chrome, Firefox, Safari y Edge. El prefijo -webkit- sigue siendo recomendado para máxima compatibilidad con navegadores basados en WebKit más antiguos.