Generador de texto con degradado (CSS)
Escribe el texto, elige dos o tres colores y el ángulo. La vista previa muestra el resultado en fondo claro y oscuro.
Cómo usarTítulo con color en degradado
Disponible en: 
Generador de texto con degradado (CSS): para qué sirve
Un título con las letras en degradado llama la atención en la página de inicio y en landing pages, y se hace solo con CSS: el degradado se convierte en el fondo del texto y background-clip: text recorta ese fondo con la forma de las letras.
El generador arma el código con el prefijo -webkit-, un color de respaldo para navegadores sin soporte, el ajuste para el modo de alto contraste de Windows y, si quieres, la animación del degradado que se detiene para quienes prefieren menos movimiento. La vista previa muestra el título en fondo claro y oscuro.
Cómo usar
- Escribe el texto y elige la fuente y el tamaño.
- Elige los colores y el ángulo.
- Copia el CSS y aplica la clase al título.
Cuándo usar
- Título de la página de inicio.
- Destacado de precio o de llamado.
- Logotipo en texto.
Preguntas frecuentes
¿Cómo se hace el texto con degradado?
El degradado es el fondo del elemento, y la propiedad background-clip: text recorta ese fondo con la forma de las letras; el color del texto queda transparente para que se vea el fondo. Funciona con cualquier fuente y el texto sigue siendo seleccionable y lo leen los lectores de pantalla.
¿Necesita el prefijo -webkit-?
El código incluye -webkit-background-clip junto con la versión sin prefijo, porque los navegadores un poco más antiguos solo lo aceptan con prefijo. El color de respaldo aparece donde nada de esto funcione.
¿Se puede usar en párrafos?
Funciona, pero es mejor reservarlo para títulos y destacados cortos. En texto corrido el degradado cansa la lectura y las partes más claras pueden quedar sin contraste con el fondo.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.