Text Gradient Generator
Crea efectos de texto con degradado CSS usando background-clip. Vista previa en vivo, copia CSS o SVG al instante.
① Escribe tu texto ② Personaliza colores, ángulo y estilo ③ Copia el CSS del degradado
Texto
Tamaño
Peso
Fuente
Alineación
Tipo
Color stops
0%
100%
Preajustes
Hello World
background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;
¿Qué es el texto con degradado CSS?
El texto con degradado CSS usa la técnica background-clip: text para aplicar un degradado como color de relleno del texto. Configurando -webkit-text-fill-color: transparent y background-clip: text, la imagen del degradado es visible a través de la forma del texto. Funciona con linear-gradient, radial-gradient y conic-gradient.
FAQ
background-clip: text recorta el fondo del elemento a la forma de su texto. Combinado con -webkit-text-fill-color: transparent, el degradado usado como fondo se vuelve visible solo a través de los caracteres de texto.
-webkit-text-fill-color anula color para el relleno de texto en motores WebKit/Blink. Usar solo color: transparent puede no ocultar completamente el relleno del texto en todos los navegadores.
Los degradados lineales transicionan colores a lo largo de una línea recta en un ángulo elegido. Los radiales irradian desde el centro hacia afuera. Los cónicos barren colores alrededor de un punto central como una rueda de colores.
El soporte es excelente. Chrome, Edge, Opera y Firefox soportan background-clip: text sin prefijo. Safari requiere el prefijo -webkit-background-clip: text. Esta herramienta genera ambas propiedades para compatibilidad completa.
Configura background-size a 200% 200% y anima background-position en una regla @keyframes. Por ejemplo: @keyframes gradientShift { 0% { background-position: 0% 50% } 100% { background-position: 100% 50% } }.
El texto con degradado funciona mejor para títulos hero, títulos de sección, nombres de marca y elementos decorativos. Evítalo para texto de cuerpo o tamaños pequeños donde los degradados reducen la legibilidad.
Verifica el contraste para el color stop más claro respecto al fondo. No dependas solo del color para transmitir significado. Prueba en tamaños de fuente más pequeños para confirmar la legibilidad.