▷ Cómo Crear Degradados (Gradients) en CSS

Tags: CSS

Pues hoy te explicaré todo sobre los degradados en CSS, imagino que todo el mundo sabe de sobras lo que es un degradado, pero yo lo explico por si acaso. Un degradado es cuando hacemos que un color en una posición x transicione hacia otro en una posición y en una transición gradual en la que el color poco a poco se irá convirtiendo en el otro.

Seguro que has visto montones de ellos, pero vamos, que si me he explicado mal, abajo encontrarás montones de ejemplos de ello. El caso es que si bien es cierto que contamos con herramientas online que facilitan este tema de hacer degradados mediante CSS como por ejemplo esta (y es totalmente lícito usarlas). También lo es que no es tan complicado hacerlo uno mismo. ¡Ahora verás!

¿Necesitas ayuda con el desarrollo de una página o con tu estrategia de marketing digital?
¡Consulta nuestros servicios!

Tabla de Contenidos

Degradado Lineal y Uso Básico de Degradados

Comenzaremos viendo el degradado por excelencia: el degradado lineal. Este viene a ser el degradado más típico y el que seguramente te venga primero a la cabeza cuando pienses en un degradado. Básicamente un degradado que va de un color a otro en cierta dirección.

Vamos con el CSS para crear este tipo de degradados, ya verás que es muy sencillo.


.degradado-lineal {
   background: #03aef3;
   background-image: linear-gradient(#03aef3, #FFFFFF);
}

Como ves, no tiene mucho misterio la cosa, pero te explico detalladamente. De entrada ya ves que para crear un degradado tenemos que usar la orden background-image, algo que desde mi punto de vista es un poco contra-intuitivo ya que a fin de cuentas… este degradado no es una imagen como tal, pero en fin, por algún motivo se ha hecho así y es lo que hay, sin más.

¿Te has fijado en que además hemos añadido la orden background justo encima de la orden background-image? Esto no es un error, se hace así para tener una especie de respaldo en el caso de que el degradado no cargara por algún motivo (normalmente por un navegador muy desactualizado), así al menos cargará el background que le hayamos asignado, por si las mocas.

De cara al resto, simplemente escribimos en este caso linear-gradient para elegir el tipo de degradado (más abajo veremos otros tipos) y dentro del paréntesis añadimos el color de inicio y el color de fin. Por supuesto, tú puedes añadir el color que quieras añadiendo su código en hexadecimal.

Sin embargo, seguramente ya hayas detectado que este degradado va desde arriba hasta abajo y puede que esto no sea lo que tú busques. No te preocupes, podemos crear el degradado en la dirección que queramos.

Elegir la Dirección del Degradado

Podemos elegir literalmente la dirección que queramos, aunque es cierto que de cara a las direcciones «básicas» (arriba, abajo, derecha e izquierda) es un pelín más sencillo y por ello son las primeras que te enseñaré. Eso sí, Recuerda que si no elegimos dirección, el degradado irá de arriba a abajo.

Degradado Lineal Hacia Arriba

Ahora verás cómo se hace, pero bastará con añadir to top en los parámetros de la orden CSS. Para las demás direcciones usaremos to right, to left…


.degradado-lineal-hacia-arriba {
   background: #03aef3;
   background-image: linear-gradient(to top, #03aef3, #FFFFFF);
}

Degradado Lineal Hacia la Derecha


.degradado-lineal-hacia-derecha {
   background: #03aef3;
   background-image: linear-gradient(to right, #03aef3, #FFFFFF);
}

Degradado Lineal Hacia la Izquierda


.degradado-lineal-hacia-izquierda {
   background: #03aef3;
   background-image: linear-gradient(to left, #03aef3, #FFFFFF);
}

Degradado en Diagonal


.degradado-lineal-diagonal {
   background: #03aef3;
   background-image: linear-gradient(to bottom right, #03aef3, #FFFFFF);
}

En este caso sería un degradado que va hacia la esquina inferior derecha. Para cualquier otra esquina simplemente debes cambiar el código por lo que tú quieras (to bottom left, to top right… etc).

Elegir el Ángulo Exacto

¿Las esquinas no te sirven ya que quieres un ángulo exacto? Sin problemas, también se puede. Vamos a poner por ejemplo… un ángulo de 117º (lo primero que me ha venido).


.degradado-lineal-angulo {
   background: #03aef3;
   background-image: linear-gradient(117deg, #03aef3, #FFFFFF);
}

Todos los Colores que Quieras

No hay límites (imagino que sí habrá uno como tal, pero en fin, que debe ser un valor altísimo) respecto a cuántos colores quieras aplicar en tu gradiente.

3 colores


.degradado-lineal-3 {
   background: #03aef3;
   background-image: linear-gradient(#03aef3, #FFFFFF, #61008d);
}

El Arcoíris

Para ejemplificar todavía más que puedes añadir los colores que quieras, puedes crear incluso el arcoíris.


.degradado-lineal-arcoiris {
   background: #03aef3; /* Aquí es algo complicado elegir el color por si no carga el gradient, pon el que consideres*/
   background-image: linear-gradient(to right, #e81416, #ffa500, #faeb36, #79c314, #487de7, #4b369d, #70369d);
}

Opacidad/Transparencia en Degradados

También podemos jugar con la opacidad/transparencia en los degradados, este sería un ejemplo. Para ello, en lugar de añadir colores en hexadecimal, tendremos que añadirlos en el formato rgba.


.degradado-lineal-opacidad {
   background-image: linear-gradient(to right, rgba(3,174,243,1), rgba(3,174,243,0));
}

Bastantes cosas que explicar aquí. De entrada, rgba es un formato de color en el que como ves, debemos introducir 4 valores:

Valor de Red (rojo)
Valor de Green (verde)
Valor de Blue (azul)
Valor de Alpha (opacidad)

Es muy similar al hexadecimal ya que a fin de cuentas ahí también añadimos los valores de Red, Green y Blue (de ahí viene el RGB), solo que de otro modo. Lo bueno es que RGB nos permite expandirlo a RGBA para poder añadir también una opacidad al color.

Por cierto… ¿Te has fijado que en este caso no he añadido la orden background para cargar un «color de emergencia» en el caso de que por algún motivo no cargue el degradado? Pues verás, esto no es un despiste por mi parte, te explico.

Resulta que si añadimos el «color de emergencia» o «color por defecto» o «color por si acaso» (como quieras llamarlo) este se pone justo debajo, por lo que al añadir la opacidad/transparencia este afectará al degradado. Mira qué pasa si por ejemplo le pongo background: white.


.degradado-lineal-opacidad-bg-white {
   background: white;
   background-image: linear-gradient(to right, rgba(3,174,243,1), rgba(3,174,243,0));
}

Degradado Radial

El degradado radial se aplicará de forma circular, poco misterio. Como siempre, vale más una imagen (un código en este caso) que mil palabras.


.degradado-radial {
   background: #03aef3;
   background-image: radial-gradient(#03aef3, #FFFFFF);
}

En este tipo de degradados funcionan la mayoría de cosas que he explicado para el lineal (añadir más colores, opacidad/transparencias..), o al menos las cosas que tienen sentido (la dirección como ves, no tiene mucho sentido).

Ahora de todos modos te explico las particularidades que tiene este degradado.

Degradado Circular (que no sea una elipse)

Como ves, en el ejemplo de arriba el resultado tiene más bien forma de elipse (más o menos de huevo). Para crear un degradado 100% circular, debes hacer lo siguiente:


.degradado-circular {
   background: #03aef3;
   background-image: radial-gradient(circle, #03aef3, #FFFFFF);
}

Con el arcoíris se ve mejor:


.degradado-circular-arcoiris {
   background: white;
   background-image: radial-gradient(circle, #e81416, #ffa500, #faeb36, #79c314, #487de7, #4b369d, #70369d);
}

Degradado Cónico

Para terminar tenemos el degradado cónico, a mí la verdad es que me parece algo feo, pero como ocurre con todo lo que ofrece CSS, todo tiene su uso. Así es como se vería:


.degradado-conico {
   background: #03aef3;
   background-image: conic-gradient(#03aef3, #FFFFFF);
}

Te añado de nuevo la versión arcoíris para que lo aprecies mejor:


.degradado-conico-arcoiris {
   background: #03aef3;
   background-image: conic-gradient(#e81416, #ffa500, #faeb36, #79c314, #487de7, #4b369d, #70369d);
}

Como te comentaba, queda bastante raro. Sin embargo… tiene cierta función muy interesante que nos permite crear los típicos gráficos círculares (los de queso) y eso sí que vale la pena. Quizás un día de estos hago un post sobre ese tema #ToDo, que creo que puede ser interesante tratarlo a parte.

Y nada, eso sería todo por hoy. Como has podido comprobar, podemos hacer cosas interesantísimas mediante la orden de CSS de gradient y a pesar de lo que puede parecer de entrada, es bastante sencillo crear todo tipo de degradados. Cualquier duda ya sabes, déjame un comentario; también si crees que podría añadir algo más o si me he equivocado en algo (¡soy humano!). ¡Hasta otra!