Aplicar gradiente CSS al texto y logotipos — efectos y código
Aplicar un gradiente al texto es uno de los efectos visuales más llamativos del diseño web moderno, y se usa ampliamente en títulos de hero section, logotipos y elementos de énfasis. La técnica CSS es sencilla pero requiere tres propiedades específicas aplicadas al elemento de texto. WikiPlus Generador de Gradientes CSS genera el gradiente base que necesitas para este efecto; aquí te explicamos el código completo para aplicarlo correctamente.
La técnica CSS para texto con gradiente
El efecto de texto con gradiente requiere tres propiedades CSS aplicadas al elemento de texto. Primero, background con el gradiente generado en WikiPlus: background: linear-gradient(90deg, #FF6B35, #F7C59F, #EFEFD0). Segundo, background-clip: text (con el prefijo -webkit-background-clip: text para compatibilidad con Safari). Tercero, -webkit-text-fill-color: transparent (o color: transparent en navegadores modernos). El mecanismo es: el gradiente se aplica como fondo del elemento, pero el clip recorta el fondo visible a la forma exacta de los caracteres, y el relleno transparente hace que el fondo sea visible a través del texto. El resultado es texto donde los caracteres muestran el gradiente.
Compatibilidad y prefijos necesarios
La propiedad background-clip: text fue originalmente una extensión de WebKit y aún requiere el prefijo -webkit- en algunos contextos, especialmente en Safari. El código completo y compatible es: .gradient-text { background: linear-gradient(90deg, #color1, #color2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }. Incluye ambas versiones (con y sin prefijo) y el fallback de color: transparent para navegadores que implementan la versión estándar. Este código funciona en Chrome, Firefox, Safari, Edge y todos los navegadores modernos.
Gradiente en logotipos SVG con linearGradient
Los logotipos SVG tienen su propio sistema de gradientes a través del elemento linearGradient definido en el defs del SVG. La sintaxis es: dentro del SVG, define el gradiente en defs con id único, y luego referéncialo como fill='url(#grad1)' en el path del logotipo. La ventaja sobre el clip CSS es que el gradiente SVG forma parte del archivo de imagen y se exporta correctamente a PDF, imprenta y otras herramientas que no interpretan CSS. WikiPlus genera el código CSS; para la versión SVG, los valores de color HEX del gradiente son los mismos pero la sintaxis cambia al formato XML de SVG.
Animar el gradiente de texto con CSS
Animar un gradiente de texto crea un efecto muy dinámico para CTAs y titulares de hero. La técnica más compatible usa background-size y background-position en combinación con @keyframes. El truco es crear un gradiente más grande que el elemento y animar su posición: .animated-gradient-text { background: linear-gradient(270deg, #color1, #color2, #color1); background-size: 300% 300%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradientShift 4s ease infinite; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }. Este efecto es llamativo pero debe usarse con moderación para no dificultar la lectura.
Preguntas frecuentes
- ¿El texto con gradiente CSS es accesible para lectores de pantalla?
- Sí. La técnica de gradiente de texto usa las propiedades CSS puramente para el aspecto visual: el texto HTML sigue siendo texto real, legible por lectores de pantalla como JAWS, NVDA y VoiceOver. A diferencia de un texto renderizado como imagen, el texto con gradiente CSS es completamente accesible, seleccionable, copiable y compatible con ajustes de accesibilidad del navegador.
- ¿El gradiente de texto funciona en todos los tamaños de fuente?
- Sí. El efecto funciona con cualquier tamaño de fuente. Para tamaños pequeños (menos de 14px), los gradientes muy complejos con muchas paradas de color pueden no ser distinguibles. Para tamaños de título grandes (36px o más), los gradientes con pocos colores y transiciones suaves son los más impactantes visualmente. La elección del gradiente debe considerar el tamaño del texto donde se aplicará.
- ¿Puedo aplicar gradiente solo a algunas letras de un texto?
- No directamente con CSS. La técnica de background-clip aplica el gradiente al elemento completo. Para aplicar gradiente solo a algunas letras, necesitas envolver cada letra o grupo de letras en un span individual y aplicar el gradiente CSS a cada span con diferentes valores de color para que el gradiente completo se distribuya entre todos los spans. Es técnicamente posible pero requiere ajuste manual de los valores de color de cada span.