ZenovayTools

Generador de Texto de Gradiente CSS

Cree efectos de texto de gradiente con CSS. Elija colores, ángulo y tipo de gradiente. Vista previa en vivo con código CSS listo para copiar.

Presets

Text

Font size72px

Gradient

Angle90°

Color stops

#ec48990%
#a855f750%
#3b82f6100%

Preview

Gradient Text
CSS Output
background: linear-gradient(90deg, #ec4899 0%, #a855f7 50%, #3b82f6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;

Cómo usar Generador de Texto de Gradiente CSS

  1. 1Ingrese su texto y ajuste el tamaño de fuente.
  2. 2Elija el tipo de gradiente y el ángulo.
  3. 3Añada paradas de color y ajuste las posiciones.
  4. 4Copie el CSS generado para su proyecto.
ZenovayAnalytics

Descubre qué hacen de verdad tus visitantes.

  • Seguimiento de visitantes en tiempo real
  • Privacidad primero, sin aviso de cookies
  • Configurado en dos minutos
Descubre Zenovay

Herramientas relacionadas

Generador de Degradados CSS
Crea hermosos degradados CSS con un editor visual. Degradados lineales, radiales y cónicos.
Generador de Sombra de Caja CSS
Diseña sombras de caja CSS con controles visuales. Ajusta desplazamiento, desenfoque, expansión y color.
Generador de Borde Redondeado CSS
Crea valores de borde redondeado personalizados con controles visuales. Vincula o desvincula las esquinas para ajustes rápidos.
Área de Juego CSS Flexbox
Aprende y genera diseños CSS Flexbox visualmente. Ajusta dirección, alineación, envoltura y espaciado en tiempo real.

Preguntas frecuentes

¿Cómo funciona el texto de gradiente CSS?▾
El texto de gradiente CSS utiliza tres propiedades: un fondo de gradiente, background-clip: text para recortar el fondo a la forma del texto y color: transparent para hacer que el relleno de texto sea transparente para que el gradiente brille. Esta técnica funciona con cualquier gradiente CSS.
¿Cuál es la compatibilidad del navegador para texto de gradiente?▾
background-clip: text es compatible con todos los navegadores modernos. Chrome, Edge y Safari requieren el prefijo -webkit- (-webkit-background-clip: text). Firefox es compatible con ambos prefijos y sin prefijos. Siempre incluya ambos para máxima compatibilidad.
¿Qué hace background-clip: text?▾
background-clip: text recorta el fondo del elemento al área cubierta por su contenido de texto. Sin él, el gradiente llena toda la caja del elemento. Combinado con un color de texto transparente, esto crea el efecto de texto relleno de gradiente.
¿Puedo animar texto de gradiente?▾
Sí. Utilice un fondo más grande (por ejemplo, 200% 200%) y anime la posición del fondo con @keyframes. El gradiente se desliza detrás de la máscara de recorte en forma de texto, creando un efecto de color fluido. Utilice will-change: background-position para una animación suave.
¿Hay preocupaciones de accesibilidad con el texto de gradiente?▾
El texto de gradiente puede tener un contraste variable contra el fondo. Asegúrese de que la parte más oscura del gradiente cumpla con los índices de contraste WCAG (4,5:1 para texto normal, 3:1 para texto grande). Los lectores de pantalla leen el texto normalmente independientemente del estilo visual.