Toolzi LogoToolzi

Generador de Texto con Degradado CSS

Genera efectos de texto con degradado CSS al instante. Personaliza colores y dirección, previsualiza en vivo y copia el código CSS.

0%
100%

Vista Previa

Hello World
48px

Código CSS

.gradient-text {
  background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

¿Qué es el texto con degradado CSS?

El texto con degradado CSS aplica un degradado de color al texto usando un degradado como fondo del elemento y recortándolo a la forma del texto con background-clip: text. Esta técnica crea tipografías llamativas sin imágenes.

Cómo aplicar degradado al texto en CSS

Establece un fondo degradado en el elemento, luego aplica -webkit-background-clip: text y -webkit-text-fill-color: transparent. La propiedad background-clip: text recorta el fondo al texto, revelando el degradado a través de las letras.

Compatibilidad de Navegadores

-webkit-background-clip: text es compatible con todos los navegadores modernos incluyendo Chrome, Firefox, Safari y Edge. La propiedad estándar background-clip: text también está bien soportada. Incluye siempre ambas versiones para mayor cobertura.

Preguntas Frecuentes

¿Cómo hago texto con degradado en CSS?
Aplica un degradado como fondo, luego usa -webkit-background-clip: text y -webkit-text-fill-color: transparent para mostrar el degradado a través del texto.
¿El texto con degradado CSS funciona en todos los navegadores?
Sí. -webkit-background-clip: text es compatible con todos los navegadores modernos incluyendo Chrome, Firefox, Safari y Edge.
¿Puedo usar degradados radiales o cónicos para el texto?
Sí. Cualquier tipo de degradado CSS (linear, radial, conic) puede usarse como fondo para texto con degradado.
¿Por qué necesito -webkit-text-fill-color: transparent?
-webkit-text-fill-color sobreescribe el color del texto en navegadores WebKit. Al establecerlo en transparent, el fondo degradado se ve a través del texto.
¿Puedo animar el texto con degradado CSS?
Sí. Puedes animar background-position o usar CSS @keyframes con background-size para crear efectos de texto degradado animados.
¿Cuál es la diferencia entre color y -webkit-text-fill-color?
-webkit-text-fill-color tiene prioridad sobre color en los navegadores que lo soportan, permitiendo que el fondo degradado se vea a través del texto.

Herramientas Relacionadas

CSS Gradient Generator →