Una guía completa para los degradados CSS

La sintaxis se declara en la propiedad background(taquigrafía) o background-imageen CSS. Se lee así en inglés sencillo:

Cree una imagen de fondo que sea un degradado lineal que se mueve [en esta dirección o en este ángulo] y comienza con [un color] y termina con [otro color] .

La sintaxis oficial se parece más a esto:

linear-gradient(  [ angle | to side-or-corner ]? ,  color-stop-list)side-or-corner = [to left | to right] || [to top | to bottom]

Comenzamos con el ejemplo más básico, un CSS degradado de dos colores que va de arriba a abajo:

.gradient {  background-image: linear-gradient(#ff8a00, #e52e71);}

Bonito, ¿verdad? Observe que no declaramos el ángulo en el ejemplo anterior. CSS asumirá to bottomen ese escenario, ¿dónde #ff8a00está el color inicial que pasa al siguiente color #e52e71?

Podríamos haber escrito lo mismo de otras dos maneras:

/* Explicitly declare the direction */background-image: linear-gradient(to bottom, #ff8a00, #e52e71);/* Explicitly declare the angle, in degrees */background-image: linear-gradient(180deg, #ff8a00, #e52e71);

Para hacer que el gradiente CSS vaya de izquierda a derecha, pasó un parámetro adicional al comienzo de la linear-gradient()función, comenzando con la palabra toque indica la dirección. Dividamos el valor de la propiedad en líneas separadas para que sea más fácil ver qué está pasando.

.gradient {  background-image:    linear-gradient(      to right,      #ff8a00, #e52e71    );} 

¡Genial, ahora los colores pasan del borde izquierdo al borde derecho del elemento!

Esta tosintaxis también funciona para las esquinas. Por ejemplo, si quisieras que el eje del degradado comenzara en la esquina inferior izquierda y llegara a la esquina superior derecha, podrías decir to top right:

.gradient {  background-image:    linear-gradient(      to top right,      #ff8a00, #e52e71    );}

Si ese cuadro fuera de un cuadrado perfecto, el ángulo del degradado habría sido 45deg, pero como no lo es, no lo es. Si desea asegurarse de que sea 45deg, puede declarar el ángulo exacto, eliminando únicamente tola sintaxis:

.gradient {  background-image:    linear-gradient(      45deg,       #ff8a00, #e52e71    );}

¡No estamos limitados a solo dos colores! De hecho, podemos tener tantos colores separados por comas como queramos. Aquí hay cuatro:

.gradient {  background-image:    linear-gradient(      to right,       red,       #f06d06,       rgb(255, 255, 0),       green    );}

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

Móvil/Tableta

Lo que hay que saber sobre los degradados y el “negro transparente”

Chris Coyier

Crea fondos rayados con degradados (y una mezcla descarada)

gatito giraudel

Facilitar los gradientes lineales

Andreas Larsen

La radial-gradient()notación se utiliza en la propiedad backgroundo background-imageen CSS. Esto tiene mucho sentido si registramos que los degradados son básicamente el CSS para crear imágenes que de otro modo crearíamos en un software de edición de imágenes y las colocaríamos en una backgroundpropiedad de todos los modos.

La sintaxis oficial es la siguiente:

radial-gradient(  [ ending-shape || size ]? [ at position ]? ,  color-stop-list);

Podría resultar un poco útil traducirlo al inglés básico:

¡Oye, elemento! Pinte un degradado radial de alguna forma y de algún tamaño que se ubica en estas posiciones . Ah, y asegúrese de que comience con este color y termine en este color .

La radial-gradientnotación acepta los siguientes valores:

• shape: Determina la forma que sigue el degradado al realizar la transición hacia afuera, de un color al siguiente. Como estamos hablando de degradados radiales, las formas se limitan a ser de naturaleza circular. Podemos omitir este valor y la notación medirá las longitudes de los lados del elemento para determinar si un valor se adapta mejor a la situación. Por ejemplo, un elemento que sea un cuadrado perfecto sería una excelente combinación, circlemientras que cualquier elemento rectangular está listo para usar ellipse.
  • circle
  • ellipse
• size: Influye en la forma final del degradado tomando el shapevalor e indicando dónde debe terminar el degradado según el centro de la forma. Esto se puede expresar por nombre o por una medida exacta de longitud.
  • closest-side: El degradado terminará en el lado más cercano al centro de la forma. Si dos partes coinciden con este criterio, se distribuirá equitativamente.
  • farthest-side(predeterminado): Lo opuesto a closest-side, donde el degradado terminará en el lado más alejado del centro de la forma.
  • closest-corner: El degradado terminará en la esquina que coincide como la más cercana al centro de la forma.
  • farthest-corner: Lo opuesto a closest-corner, donde el degradado termina en la esquina más alejada del centro de la forma.
  • radius: Podemos especificar un valor numérico que sirva como radio del círculo. Esto debe indicarse en píxeles positivos o unidades relativas. Lo sentidos, no se permiten unidades ni porcentajes negativos porque un círculo negativo sería un vacío y los porcentajes pueden ser relativos a cualquier número de valores circundantes.
    • or percentage: Se puede proporcionar un segundo valor numérico para declarar el tamaño explícito de una elipse, pero no de un círculo. Nuevamente, los valores negativos son un no-no, pero los porcentajes son un juego limpio ya que el tamaño es relativo al cuadro de degradado en lugar del elemento.
• position: Esto funciona de forma muy parecida a como lo hace en background-position. Eso significa que top, right, lefty centertodos funcionan aquí, así como combinaciones en las que top centerse proporcionan dos valores con nombre (por ejemplo, ). También podemos especificar una posición exacta usando un valor numérico, incluido el porcentaje, todos los cuales son relativos al cuadro delimitador del elemento. El valor predeterminado es center center.
• color-stop: Estos son valores de color que definen el degradado. Aquí se acepta cualquier valor de color, incluidos hexadecimal, con nombre, RGB y HSL.

Así es como se ve quizás en su forma más básica. Tenga en cuenta que no declaramos los valores shape, o que por defecto son valores que colocan el degradado en el centro del elemento y realiza una transición uniforme entre los valores de color declarados size.positioncolor-stop

.gradient {  background-image:    radial-gradient(      #ff8a00,      #e52e71    );}

¿Busca más ejemplos de gradientes radiales? Patrick Brosset tiene muchos de ellos en su análisis profundo sobre gradientes radiales.

¿Ves cómo ese gradiente asume que shapees ellipseen los ejemplos anteriores? Esto se debe a que el elemento en sí no es un cuadrado perfecto. En ese caso, habría asumido un circlelugar. ¡Muy inteligente! Esto es lo que sucedería si lo hubiéramos declarado explícitamente circlecomo shapevalor:

.gradient {  background-image:    radial-gradient(      circle,      #ff8a00,      #e52e71    );} 

Observe que el degradado en las demostraciones ha sido circular y se desvanece hasta el color final a lo largo del borde más alejado. Podemos declarar explícitamente el positionvalor para asegurarnos de que el desvanecimiento termine en el “lado más cercano” del shapelugar, así:

.gradient {  background-image:    radial-gradient(      circle closest-side,      #ff8a00,      #e52e71    );} 

Los valores posibles son: closest-corner, closest-side, farthest-corner, y farthest-side. Puedes pensar en ello como: “Quiero que este degradado radial se desvanezca desde el punto central hasta el [whichever side]”, y el resto se completa para acomodar eso.

Un degradado radial tampoco tiene que comenzar en el centro predeterminado. Puede especificar un punto determinado utilizándolo atcomo parte del primer parámetro, como:

.gradient {  background-image:    radial-gradient(      circle at top right,      #ff8a00,      #e52e71    );} 

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

Móvil/Tableta

Recetas de gradiente radial

Chris Coyier

Todo sobre los gradientes radiales.

Chris Coyier

La sintaxis del gradiente cónico es más fácil de entender en inglés sencillo:

Haz un gradiente cónico que esté ubicado en [algún punto] que comience con [un color] en algún ángulo y termine con [otro color] en [algún ángulo]

Esta es la sintaxis oficial:

conic-gradient(  [ from angle ]? [ at position ]?,  angular-color-stop-list)

En su nivel más básico, se ve así:

.gradient {  background-image:    conic-gradient(      #ff8a00, #e52e71    );}

…donde se supone que la ubicación del degradado comienza en el centro del elemento ( 50% 50%) y se distribuye uniformemente entre los dos valores de color.

Podríamos haber escrito esto de varias otras maneras, todas válidas:

.gradient {  /* Original example */  background-image: conic-gradient(#ff8a00, #e52e71);  /* Explicitly state the location center point */  background-image: conic-gradient(at 50% 50%, #ff8a00, #e52e71);  /* Explicitly state the angle of the start color */  background-image: conic-gradient(from 0deg, #ff8a00, #e52e71);  /* Explicitly state the angle of the start color and center point location */  background-image: conic-gradient(from 0deg at center, #ff8a00, #e52e71);  /* Explicitly state the angles of both colors as percentages instead of degrees */  background-image: conic-gradient(#ff8a00 0%, #ff8a00, #e52e71);  /* Explicitly state the angle of the starting color in degrees and the ending color by a full turn of the circle */  background-image: conic-gradient(#ff8a00 0deg, #e52e71 1turn);}

Si no especificamos un ángulo para los colores, se supone que el degradado se divide uniformemente entre los colores, comenzando 0degy terminando en 360deg. Esto crea una “parada dura” donde los colores chocan entre sí en 0degy 360deg. Si introducimos un tercer valor, eso crea un gradiente más suave y comenzamos a obtener esa perspectiva de aspecto de conocimiento.

.gradient {  background-image:    conic-gradient(      #ff8a00,      #e52e71,      #ff8a00    );}   

Podemos divertirnos con gradientes cónicos. Por ejemplo, podemos usarlo para crear el mismo tipo de patrón que podrías ver en un selector de color o en el infame indicador de pelota de playa giratoria de Mac:

.conic-gradient {  background-image:    conic-gradient(      red,      yellow,      lime,      aqua,      blue,      magenta,      red    );}

O probemos con un gráfico circular simple agregando paradas bruscas entre tres valores de color:

.gradient {  background-image:    conic-gradient(      lime 40%,      yellow 0 70%,      red 0    );}   

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

Móvil/Tableta

CSS gradiente cónico() polifil

Chris Coyier

Patrones de fondo, simplificados por degradados cónicos

Ana Tudor

Degradados cónicos en CSS

Shankar Cabús

Mientras no mirabas, los degradados CSS mejoraron

Ana Tudor

Hay tres tipos de gradientes repetidos, los tres actualmente compatibles con la especificación oficial y uno que se encuentra en el borrador de trabajo actual. La sintaxis de cada notación es la misma que la del tipo de gradiente relacionado. Por ejemplo, repeating-linear-gradient()sigue la misma sintaxis que linear-gradient().

Aquí hay un degradado lineal repetido que alterna entre dos colores cada 10 píxeles en un ángulo de 45 grados:

.gradient {  background-image:    repeating-linear-gradient(      45deg,      #ff8a00,      #ff8a00 10px,      #e52e71 10px,      #e52e71 20px    );}

Podemos hacer el mismo tipo de cosas, pero con un gradiente radial. ¿La diferencia? Además de la notación en sí, estamos definiendo la forma y el punto de partida:

.gradient {  background-image:    repeating-radial-gradient(      circle at 0 0,      #ff8a00,      #ff8a00 10px,      #e52e71 10px,      #e52e71 20px    );}

¡Los gradientes cónicos no son muy diferentes! Nuevamente, la gran diferencia entre los gradientes radiales y cónicos es que los colores cónicos cambian alrededor del elemento, mientras que los colores en los gradientes radiales cambian desde el centro de la fuente del gradiente.

.gradient {  background-image:    repeating-conic-gradient(      from 0deg,       #ff8a00 0deg 30deg,       #e52e71 30deg 60deg  );}

Esto es específicamente para gradientes repetidos lineales y radiales.

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

Móvil/Tableta

¿Por qué tenemos un “gradiente lineal repetido” de todos los modos?

Ana Tudor

Construyendo una superposición de cuadrícula CSS

Andreas Larsen

Hacer gráficos con CSS

Robin Rendle

Vimos cómo los degradados pueden crear patrones interesantes cuando observamos los degradados repetidos. ¡Pero hay muchos otros patrones que podemos crear! Como tableros de ajedrez:

También podemos hacer un patrón de chevron repetido:

Chris tiene un fragmento que forma un patrón de papel cuadriculado:

Estos patrones están bien documentados en la web, pero consulta la galería de patrones de degradado CSS de Lea Verou para ver algunos ejemplos realmente alucinantes.

¡Podemos crear bordes a partir de degradados!

Incluso podemos usar el truco del patrón para crear un efecto de borde divertido:

O bien, podemos poner límites estrictos para lograr un efecto de contenido superpuesto:

Podemos usar background-positiontp para que parezca que la transición entre colores en un degradado se está moviendo.

Pero, como ocurre con cualquier animación, hay que tener en cuenta la accesibilidad, especialmente en aquellas que son sensibles al movimiento. Consulta la sección Accesibilidad para obtener más información.

¡Mira esta demostración de Marty! Este es un uso súper inteligente de gradientes radiales para simular la luz del sol según la posición del cursor del mouse.

Patrones de fondo creativos que utilizan degradados, formas CSS e incluso emojis

Preethi

Creación de cargadores Yin y Yang en la Web

Ana Tudor

Dibujar imágenes con degradados CSS

Jon Kantner

Subrayados del arco iris en movimiento

Chris Coyier

Uso de degradados cónicos y variables CSS para crear una salida de gráfico de anillos para una entrada de rango

Ana Tudor

El estado del cambio de degradados con transiciones y animaciones CSS

Ana Tudor

Metal cepillado con degradados CSS

Chris Coyier

Estilo de terminal antiguo

Chris Coyier