En este tutorial, aprenderemos a incorporar un color degradado a nuestro texto mediante CSS. Con solo unos simples pasos mejoraremos el aspecto visual de nuestros proyectos web.
Paso 1: Agregar degradado
Primero, agregamos la propiedad background y luego utilizamos el valor linear-gradient con nuestros colores deseados dentro de nuestra clase .title.
En este ejemplo, empleo un degradado de tres colores, definiendo su dirección de izquierda a derecha.
.title {
font-size: 60px;
background: linear-gradient(to right, #fa4261, #f39762, #d5aa10);
background-size: cover;
}
Paso 2: Enmascarar el degradado con el texto
Ahora emplearemos dos propiedades css: background-clip y -webkit-text-fill-color.
Con background-clip: text indicamos que el fondo se debe mostrar en el texto, y -webkit-text-fill-color: transparent removemos el color de relleno del texto.
.title {
font-size: 60px;
background: linear-gradient(to right, #fa4261, #f39762, #d5aa10);
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
De esta manera, ya hemos aplicado un degradado a nuestro texto.
Plus: Agregar fuente (font) personalizada
En este ejemplo, voy a utilizar la fuente Great Vibes de Google Fonts.
Para lograrlo, añadimos la etiqueta <link /> para vincular con Google Font, todo dentro del elemento head de nuestro archivo index.html.
<head>
<!-- ... -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap"
rel="stylesheet"
/>
</head>
Luego, asignamos la fuente Great Vibes como font-family de nuestro texto.
.title {
font-family: 'Great Vibes', cursive;
font-size: 86px;
/* ... */
}
Para finalizar, decoramos nuestro contenedor añadiendo una imagen de fondo.
/* ... */
.hero {
height: 420px;
padding: 32px;
background-image: url("tulip.png");
background-repeat: no-repeat;
background-position: center 110px;
}
Soporte para navegadores
Si quieres asegurarte que el efecto se muestre solo en navegadores que soporten esta característica, puedes usar la regla @supports.
@supports permite aplicar estilos solo si el navegador soporta una característica en específico.
Además, podemos usar un color sólido como fallback (alternativa) para navegadores que no soporten el efecto.
.title {
font-size: 60px;
color: #fa4261;
}
@supports (
(-webkit-background-clip: text) or (-webkit-text-fill-color: transparent)
) {
.title {
background: linear-gradient(to right, #fa4261, #f39762, #d5aa10);
background-size: contain;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
Demo
Aquí puedes ver el resultado final:
Conclusión
En este tutorial, hemos aprendido a crear un texto degradado con CSS de una manera sencilla. Sin embargo, si buscas opciones más personalizadas, puedes valerte de herramientas prácticas como CSS Gradient y CSS Patterns. Estas herramientas te ofrecen flexibilidad adicional para perfeccionar tus degradados de una manera simple.
¡Gracias por seguir este tutorial! Espero que haya sido útil para ti. Que tengas un día maravilloso! 🌞