Los degradados de color en un sitio web son detalles muy llamativos que dan peso a cierta sección, pero no solo podemos utilizarlos como fondo de un contenedor o banner, también podemos agregar un degradado de color a títulos.
Primero tenemos que definir el texto al que aplicaremos el degradado:
<h1 class="gradient">Mi super titulo</h1>
Una ves tenemos listo nuestro titulo, solo tenemos que aplicar estilos generales:
h1{
font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
font-size: 70px;
font-weight: bold;
text-transform: uppercase;
}
Para agregar el degradado necesitamos una propiedad de css llamada 'linear-gradient', que se utiliza de la siguiente manera:
background-image: linear-gradient(direction, color-1, color-stop2, ...);
- direction: es la dirección en la que el degradado trabajara.
- color-1: en color principal o de inicio del degradado.
- color-2: en color secundario o de cierre del degradado.
El código con linear-gradient aplicado se vería así:
.gradient {
background: linear-gradient(to right, #30CFD0 30%, #520AAB 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Resultado:
Top comments (0)