Tabla de contenidos
Los gradientes nos permiten añadir efectos de colores degradados en nuestros diseños. Los gradientes están disponibles desde CSS3 y se configuran como fondos, por lo que tendremos que usar la propiedad “background“. Disponemos de dos tipos de gradientes: lineal y radial.
El gradiente lineal se define mediante la función linear-gradient() y permite crear fondos degradados en una dirección específica. El formato es el siguiente:
background: linear-gradient(dirección|ángulo, color, color, color...); background: linear-gradient(dirección|ángulo, color tamaño, color tamaño, color tamaño...); background: linear-gradient(color, color, color…);
Significado de las propiedades:
Recuerda utilizar la extensión que te facilita la tarea de crear los prefijos para navegadores. En estas propiedades hay diferencias entre las funciones estándar y las especificadas por los navegadores.
Prueba las siguientes propiedades en diferentes contenedores y observa las diferencias entre los distintos valores.
background: linear-gradient(90deg, rgba(176,174,238,1) 0%, rgba(29,30,31,1)); background: linear-gradient(to right, red,brown,orange,yellow,blue,green,violet,pink); background: linear-gradient(to top, #000, #ccc); background: linear-gradient(to right,red 300px,brown 400px,orange 700px);
0
El gradiente radial nos permite crear degradados con formas circulares. El formato para los gradientes radiales es muy parecido al anterior. En este caso, debemos usar la función radial-gradient() y un nuevo atributo para la forma.
background: radial-gradient(forma, color, color, color...); background: radial-gradient(forma tamaño, color, color, color...); background: radial-gradient(forma, color tamaño, color tamaño, color tamaño...); background: radial-gradient(color, color, color...);
Significado de las propiedades:
Prueba las siguientes propiedades en diferentes contenedores y observa las diferencias entre los distintos valores.
background: radial-gradient(ellipse, rgba(176,174,238,1) 0%, rgba(29,30,31,1)); background: radial-gradient (circle,red,brown,orange,yellow,blue); background: radial-gradient(circle,red 300px,brown 400px,orange 700px); background: radial-gradient(#000, #ccc);
0
Para facilitarnos la tarea de la creación de gradientes podemos utilizar un generador de gradientes online que nos proporcione el código CSS necesario para nuestro diseño. Algunas herramientas online útiles son las siguientes:
background: rgb(176,174,238); background: radial-gradient(circle, rgba(176,174,238,1) 0%, rgba(29,30,31,1) 100%);
Podemos aplicar diseños muy trabajados creando patrones sin necesidad de cargar imágenes con mucho peso. Existen diversos artistas dedicados a hacer este tipo de diseños. Algunos ejemplos de diseños de este tipo se pueden obtener en la siguiente plataforma:
Aplica un gradiente en uno de los contenedores de tu proyecto web. El gradiente debe contener los colores establecidos en la guía de estilo de tu proyecto web.