DEV Community

loading...

CSS Background color en Textos

dmx profile image Dorian Morones ・1 min read

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:

Alt Text

Codepen

Discussion (0)

pic
Editor guide