Generador de degradados CSS

Los degradados lineales transicionan los colores a lo largo de una línea recta (horizontal, vertical o diagonal), creando un flujo direccional de un color a otro. Los degradados radiales irradian desde un punto central hacia el exterior siguiendo un patrón circular o elíptico. Utilice degradados lineales para dar énfasis direccional y para interfaces modernas, y degradados radiales para efectos de foco, botones o interés visual orgánico.

Puede establecer el ángulo del degradado en grados (de 0 a 360 grados) o utilizar palabras clave como "hacia la derecha", "hacia abajo", "hacia arriba a la derecha", etc. 0deg apunta hacia arriba, 90deg apunta a la derecha, 180deg apunta hacia abajo y 270deg apunta a la izquierda. El ángulo determina el eje a lo largo del cual se produce la transición de colores, lo que le proporciona un control total sobre la dirección del degradado.

¡Sí! Los degradados CSS admiten un número ilimitado de paradas de color. Puedes añadir múltiples colores para crear degradados complejos multicolor. Cada color puede tener un porcentaje de posición opcional (0% a 100%) para controlar dónde aparece en el degradado. Esto es perfecto para crear efectos de arco iris, degradados de atardeceres o sofisticadas transiciones de color.

Utilice dos colores cercanos en tono, saturación o luminosidad. Por ejemplo, pasa de un azul medio a un azul ligeramente más claro o más oscuro. Mantenga el contraste bajo y considere la posibilidad de utilizar valores HSL en los que sólo ajuste la luminosidad en un 10-20%. Los degradados sutiles añaden profundidad e interés visual sin abrumar el contenido.

Los degradados CSS modernos (que utilizan degradado lineal y degradado radial) son compatibles con todos los navegadores actuales sin prefijos de proveedor. Sin embargo, si necesitas compatibilidad con navegadores muy antiguos (IE9 y anteriores), es posible que necesites prefijos de proveedor (-webkit-, -moz-, -o-) o colores sólidos de reserva. Para el desarrollo web moderno, la sintaxis de degradado CSS estándar funciona en todas partes.

Coloque las paradas de color de manera uniforme y evite los saltos de color drásticos. Utilice paradas de color intermedias entre los colores extremos para crear transiciones más suaves. Para los degradados radiales, experimenta con la forma (círculo frente a elipse) y la posición. Considera la posibilidad de utilizar colores con valores de saturación y luminosidad similares, o de trabajar en el espacio HSL, donde puedes crear transiciones de tono suaves.

Los degradados radiales pueden ser circulares (iguales en todas las direcciones) o elípticos (estirados para ajustarse al contenedor). Los círculos funcionan bien para efectos de foco y diseños centrados, mientras que las elipses son mejores para fondos que necesitan cubrir áreas rectangulares uniformemente. El parámetro de forma permite controlar este comportamiento.

Sí. Utilice ángulos entre 0deg y 360deg para degradados diagonales. 45 grados crea una diagonal perfecta desde abajo a la izquierda hasta arriba a la derecha, 135 grados va desde abajo a la derecha hasta arriba a la izquierda. Los degradados diagonales añaden interés visual dinámico y pueden guiar al ojo a través de su diseño.

Utilice los formatos de color RGBA o HSLA con un canal alfa para crear degradados que se desvanecen hasta hacerse transparentes. Esto es perfecto para efectos de superposición, máscaras de imagen o para crear profundidad. Por ejemplo, un degradado de rgba(0,0,0,1) a rgba(0,0,0,0) crea un fundido a negro transparente.

Las paradas de color controlan dónde aparece cada color en el degradado (0% a 100%). Un espaciado uniforme crea transiciones suaves, mientras que agrupar las paradas crea cambios de color bruscos. Por ejemplo, colocar dos colores al 50% crea una línea dura, mientras que espaciarlos al 40% y al 60% crea una mezcla suave.