Degradados con CSS3: fondos y gradientes

Creo que no queda duda entre, todos lo que nos dedicamos al diseño web, que la tercera versión de CSS (que llamamos CSS3) ha supuesto una revolución en muchos aspectos: nuevos selectores, nuevas propiedades, animaciones… pero también ha mejorado el rendimiento y velocidad de carga de muchas webs.

Ver DemoDescargar

Y los degradados son una de ellas. ¿Recordáis lo que teníamos que hacer antes para tener un degradado de dos colores como fondo en nuestra web? Eran imágenes, que usábamos como background-image y listo. La imagen en cuestión, al tener tanta información de color, pesaba lo suyo, con la correspondiente llamada extra al servidor y descarga de unos (muchos) kbs extras. Nada bueno para para la experiencia de usuario.

Hasta que llegó CSS3 con sus gradientes, que nos permite aplicar un degradado usando una sola línea en su declaración (o varias si necesitamos compatibilidad entre navegadores). Rápido y sobre todo muy ligero: decimos los colores al navegador y él solito se encarga de generar la transición y correspondiente degradado entre ambos colores. Genial. Ahora ya tenemos las herramientas para pasar nuestro degradado de fase de diseño a fase de maquetación.

Como crear un degradado utilizando la propiedad CSS background

En esta demo hemos creado una serie de bloques con diferentes degradados y colores, además de combinarlas con unas tipografías geniales. Siéntete libre de inspeccionar el código y descargar los archivos para usarlos en tu proyecto 🙂

Al grano. El CSS necesario para generar un degradado es relativamente corto. Necesitamos ciertos datos: un mínimo de dos colores y una dirección. De amarillo a naranja desde la izquierda a la derecha. Este sería el caso más simple:

background: -webkit-linear-gradient(90deg, yellow 10%, orange 90%);
background: -moz-linear-gradient(90deg, yellow 10%, orange 90%);
background: -ms-linear-gradient(90deg, yellow 10%, orange 90%);
background: -o-linear-gradient(90deg, yellow 10%, orange 90%);
background: linear-gradient(90deg, yellow 10%, orange 90%);

Simple y rápido. la propiedad background le aplicamos un gradiente lineal (linear-gradient) con una direccionalidad de 90 grados (de izquierda a derecha) entre dos colores, amarillo y naranja. Puedes notar que ambos colores tienen un valor en %. Eso indica en qué momento del degradado son aplicados. El color amarillo comenzará a degradarse a partir del 10% de ancho, hasta el naranja, que será totalmente naranja cuando el ancho del contenedor alcance el 90%.

Las 5 líneas no son necesaria (es para asegurar la compatibilidad entre los navegadores más antiguos). Lo importante es que la última que se aplique sea la regla sin prefijos.

Más colores y diagonales. Podemos darle un poco más de complejidad añadiendo más colores, cambiando el grado de inclinación e incluso el tipo de degradado. Además de linear-gradient tenemos radial-gradient, donde partiremos desde el centro hacia los extremos. Y si queremos jugar más, también tenemos disponibles repeating-linear-gradient y repeating-radial-gradient.

El límite de los degradados lo pone tu imaginación. Si quieres algo de inspiración, te recomiendo pasarte por la demo e inspeccionar el código, o descargarte directamente el código.

El HTML sería el siguiente para un par de secciones:

<section class="section_item flex-container color-2">
  <h1 class="flex-item">Watermelon</h1>
  <p class="flex-item">From #e74d6b to #8cc8ac and Cupcake ipsum dolor sit amet. Topping biscuit jelly beans chocolate danish powder dessert. Donut candy chocolate bar. Jelly bear claw cotton candy apple pie muffin lemon drops.</p>
</section>
<section class="section_item flex-container color-3">
  <h1 class="flex-item">Pinapple</h1>
  <p class="flex-item">From #65997d to #fccb6e and Cupcake ipsum dolor sit amet. Topping biscuit jelly beans chocolate danish powder dessert. Donut candy chocolate bar. Jelly bear claw cotton candy apple pie muffin lemon drops.</p>
</section>

Y el CSS

.section_item {
  height: auto;
  max-width: calc(100vw - 30px);
  margin: 15px;
  padding: 10vw;
  z-index: 1;
  position: relative;
  text-align: center;
}
.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: space-around;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.flex-item {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.section_item p {
  font-size: 18px;
  font-size: 1rem;
  color: #fff;
  max-width: 700px;
  line-height: 1.5;
}

/* Background colors */
.color-2 {
  background: -webkit-linear-gradient(90deg, #e74d6b 10%, #8cc8ac 90%);
  background:    -moz-linear-gradient(90deg, #e74d6b 10%, #8cc8ac 90%);
  background:     -ms-linear-gradient(90deg, #e74d6b 10%, #8cc8ac 90%);
  background:      -o-linear-gradient(90deg, #e74d6b 10%, #8cc8ac 90%);
  background:         linear-gradient(90deg, #e74d6b 10%, #8cc8ac 90%);
}
.color-3 {
  background: -webkit-linear-gradient(90deg, #65997d 10%, #fccb6e 90%);
  background:    -moz-linear-gradient(90deg, #65997d 10%, #fccb6e 90%);
  background:     -ms-linear-gradient(90deg, #65997d 10%, #fccb6e 90%);
  background:      -o-linear-gradient(90deg, #65997d 10%, #fccb6e 90%);
  background:         linear-gradient(90deg, #65997d 10%, #fccb6e 90%);
}

Generadores de degradados de CSS

Como hemos visto crear degradado es muy fácil y sencillo. Pero si aún así buscas algo más visual y sencillo, siempre puedes acudir a los generadores de degradados.Mi consejo es que siempre que uses alguna de estas herramientas, revises el código antes de implementarlo en tu diseño, por si hay algún elemento que pulir o limpiar.

Algunos buenos ejemplos son: Generador CSS de CSSmatic y el generador de ColorZilla.
Pero además hay un recurso muy bueno, sobre todo si estás en fase de mockups o prototipado y necesitas un código rápido y sin complicaciones: uiGradients, una librería de degradados en CSS listo para copiar y usar.

La decisión de incluir un degradado en diseño siempre tiene que estar justificada

Como todas las cosas nuevas, corremos el riesgo de caer en el error de usarlas todas sin sentido. Antes de introducir un elemento tan definido como un degradado en tu diseño, hazte las siguientes preguntas: ¿Es necesario? ¿mejora en algo el diseño o todo lo contrario? ¿afecta a la legibilidad de los textos?

Introducir un degradado en un proyecto no debería ser una decisión del maquetador que toma en el último momento, es algo que tiene que pensarse desde las fases anteriores, y que aporte algo al proyecto. Estaría bien que volvamos a leer esta artículo sobre la aplicación de los degradados al diseño y la psicología del color.

Del mismo modo, un degradado perfila mucho el estilo de nuestra web. Por ello piensa en el concepto global de la misma (ya sea flat design, material design u otra…) y piensa si realmente merece la pena. Y si la respuesta es sí, adelante, ya sabes como hacerlo!
Suerte 🙂