DEV Community

Dorian Morones
Dorian Morones

Posted on • Updated on

CSS Background color en Textos

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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, ...);
Enter fullscreen mode Exit fullscreen mode
  • 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;
}

Enter fullscreen mode Exit fullscreen mode

Resultado:

Discussion (0)