Generador de Degradados

Generador de Degradados CSS - Crear Degradados Hermosos

Un potente generador de degradados CSS que crea degradados lineales y radiales con múltiples colores. Características incluyen vista previa en vivo, direcciones y posiciones personalizables, degradados predefinidos y exporta código CSS listo para usar. Vea también nuestro Generador de Paleta y nuestro Verificador Contraste.

¿Cómo creo un degradado CSS para una sección hero?

Empieza con dos colores relacionados — los tonos análogos son los más seguros porque mezclan sin producir tonos medios turbios. Colócalos en las dos primeras paradas de color y ajusta el ángulo a 135deg, que se lee como luz natural desde arriba a la izquierda y es la dirección de degradado más popular en heroes modernos. Previsualiza y copia la regla CSS generada (p. ej. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);) y pégala en el contenedor hero de tu hoja de estilos. Para que el texto sea legible, capa una superposición semi-transparente oscura sobre el degradado usando background-image con linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) encima del degradado de color. Es el truco que usan casi todas las landing modernas.

¿Cuál es la diferencia entre degradados lineales y radiales?

Un degradado lineal transiciona colores a lo largo de un eje recto definido por un ángulo (0deg es de abajo arriba, 90deg de izquierda a derecha, 180deg de arriba abajo, 270deg de derecha a izquierda). Es la elección adecuada para fondos a sangre, tarjetas, botones y cualquier sitio donde quieras un barrido direccional. Un degradado radial transiciona colores desde un punto central hacia fuera en círculos o elipses concéntricos; puedes posicionar el centro donde quieras (radial-gradient(circle at top right, #A, #B)). Es la elección adecuada para efectos de foco, esferas brillantes, estados hover de botón y fondos abstractos. Los lineales son con diferencia los más comunes en UI de producción; los radiales son más decorativos y se usan con moderación.

¿Qué son las paradas de color y cómo funcionan los porcentajes?

Una parada de color es un par (color, posición) que indica al navegador exactamente dónde en el eje del degradado debe aparecer ese color a plena intensidad. Las posiciones son porcentajes de 0% (inicio del eje) a 100% (final). Sin posiciones, el navegador distribuye las paradas uniformemente: dos colores en 0% y 100%, tres en 0%, 50%, 100%, etc. Puedes desplazar cualquier parada para sesgar el degradado: linear-gradient(red 0%, yellow 20%, blue 100%) hace la transición rojo-amarillo apretada y da la mayor parte del lienzo a la mezcla amarillo-azul. Colocar dos paradas en la misma posición crea una parada dura (sin mezcla, cambio instantáneo de color), así se construyen rayas, barras de progreso segmentadas y fondos de color en bloque.

¿Cómo elijo el ángulo correcto para un degradado?

La convención de ángulos CSS es estilo reloj: 0deg apunta arriba, 90deg a la derecha, 180deg abajo, 270deg a la izquierda. 90deg (izquierda a derecha) va bien en barras de navegación y cabeceras de línea de tiempo; 180deg (arriba abajo) es el degradado estilo cielo por defecto; 135deg (esquina superior izquierda a inferior derecha) es el caballo de batalla visual — se lee como luz diurna natural y es el que usan la mayoría de apps modernas para heroes, dashboards y fondos de tarjeta. Invierte un degradado sumando 180 a su ángulo, o usa el botón Invertir que intercambia las paradas. Evita ángulos como 1deg o 89deg salvo que quieras un efecto casi-pero-no-del-todo horizontal; la inclinación leve suele parecer un bug CSS más que diseño intencional.

¿Puedo crear degradados con más de dos colores suavemente?

Sí, y añadir un tercer color es la forma más fácil de hacer que un degradado se sienta premium en vez de genérico. El truco es elegir tres colores que ya estén cerca en la rueda — análogos (rojo, naranja, amarillo) o un par de marca más un neutro relacionado. Colócalos en 0%, 50%, 100% para mezcla uniforme de tres vías, o desplaza la parada central (0%, 30%, 100%) para asimetría. Evita saltar por la rueda porque el navegador interpola por tonos no relacionados y produce un gris turbio en el punto medio — un degradado azul-amarillo pasa por gris-verde al 50%. Para efectos arcoíris se necesitan seis o siete paradas, pero suelen leerse como decoración más que profesionalismo. Dos o tres paradas es el punto dulce para la mayoría del trabajo UI.

¿Cómo mantengo el texto legible sobre un fondo con degradado?

Los degradados cambian de contraste a lo largo de su recorrido, así que un color de primer plano que cumple WCAG 4.5:1 arriba puede fallar abajo. Cuatro defensas: (1) superpón una capa plana semi-transparente oscura o clara entre el degradado y el texto usando un segundo background-image — linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)) mantiene contraste uniforme; (2) confina el texto a una caja plana con su propio fondo (una tarjeta encima del hero); (3) añade sombra de texto sutil (text-shadow: 0 1px 3px rgba(0,0,0,0.4)) para separar las letras de áreas cargadas; (4) limita la saturación del degradado para que la parada más oscura siga siendo lo bastante oscura como para contrastar con blanco en el peor caso. Valida siempre el contraste de peor posición con un verificador WCAG antes de publicar.

¿Cuál es el coste de rendimiento de los degradados CSS frente a fondos de imagen?

Los degradados CSS son esencialmente gratis comparados con fondos de imagen. El navegador los calcula al pintar usando shaders GPU simples, la regla en sí ocupa decenas de bytes de texto en vez de decenas o cientos de kilobytes de píxeles comprimidos, y escalan a cualquier tamaño de contenedor sin producir bordes borrosos como haría un JPG. Además se adaptan al instante a modo oscuro o cambios de tema con variables CSS. El único coste menor es durante animaciones: animar background-image no está acelerado por GPU, así que las transiciones cross-fade entre dos degradados pueden tartamudear. La solución es capar dos fondos de degradado y animar la opacidad del superior, que sí está acelerada por GPU. Para heroes estáticos, los degradados casi siempre son preferibles a fondos raster.

¿Cómo igualo un degradado a colores que ya veo en un sitio que admiro?

Toma una captura de la inspiración, ábrela en cualquier selector de color (el Selector de Color de Imagen de este sitio, Figma o el cuentagotas del SO) y muestrea el brillo más claro y la sombra más oscura dentro del degradado. Coloca esos dos HEX en la primera y la última parada de color aquí. Si el degradado original tiene tres colores, muestrea el medio también y añade una parada en aproximadamente el mismo porcentaje. La mayoría de degradados profesionales usa paradas monocromáticas (un tono, dos luminosidades) o análogas (tonos vecinos con interpolación suave); si tu muestra revela un color medio muy distinto, probablemente sea una mezcla aditiva con superposición translúcida en vez de un solo degradado. Prueba a cambiar tu ángulo a 135deg si la inspiración barre en diagonal.

¿Qué es la interpolación OKLCH y por qué se ve mejor que sRGB?

Cuando el navegador dibuja un degradado debe inventar cada color intermedio entre tus paradas, y el espacio de color en el que interpola cambia el resultado drásticamente. El predeterminado heredado es sRGB, que mezcla valores crudos de rojo/verde/azul; como sRGB no es perceptualmente uniforme, los tonos opuestos derivan hacia un gris apagado y desaturado en el punto medio — el famoso problema de "por qué mi degradado azul-amarillo se ve turbio en el centro". OKLCH (y su pariente cartesiano Oklab) interpolan en un espacio perceptualmente uniforme diseñado para que pasos numéricos iguales se vean como pasos visuales iguales, manteniendo la luminosidad pareja y enrutando el tono por el camino corto y vívido en vez de pasar por gris. Esta herramienta te deja elegir el espacio de interpolación y previsualiza el resultado exacto. Al elegir OKLCH, el CSS copiado entrega primero un fallback perceptual pre-renderizado y luego mejora progresivamente a la sintaxis nativa CSS Color 4 `in oklch` dentro de un bloque @supports, de modo que los navegadores que no entienden la pista igual renderizan el mismo degradado suave que aprobaste en vez de caer silenciosamente a otra mezcla sRGB. Usa OKLCH u Oklab para mezclas vívidas de varios tonos; sRGB solo cuando debas igualar un diseño heredado existente.

¿Cómo funciona la verificación de contraste WCAG y qué cuenta como aprobado?

Los degradados cambian de brillo a lo largo de su recorrido, así que el texto blanco perfectamente legible sobre el extremo claro de un hero puede volverse ilegible sobre el extremo oscuro (o viceversa). La verificación de contraste muestrea el degradado densamente de 0% a 100% en tu espacio de interpolación elegido, calcula la relación de contraste de luminancia relativa WCAG entre tu color de texto y cada punto muestreado, y reporta la única relación del peor caso más la posición donde ocurre. Un fondo aprobado debe superar el umbral en todas partes, no solo en un extremo: WCAG AA requiere 4.5:1 para texto normal de cuerpo, AA Grande permite 3:1 para texto de 18pt+/14pt en negrita, y AAA pide 7:1. Alterna entre texto blanco y negro (o elige cualquier color personalizado) para ver cuál es seguro. Si la relación del peor caso falla, corrígelo oscureciendo o aclarando el extremo problemático, reduciendo la saturación, añadiendo una superposición semi-transparente entre el degradado y el texto, o colocando el texto sobre su propia tarjeta sólida — luego vuelve a verificar hasta que la peor posición apruebe.

Características Clave

• Crear degradados lineales y radiales
• Vista previa en vivo con actualizaciones instantáneas
• Agregar paradas de color ilimitadas
• Ajustar posiciones de color con precisión
• Múltiples opciones de dirección
• Soporte de ángulo personalizado (0-360°)
• 8 hermosos degradados predefinidos
• Copiar código CSS al portapapeles
• Generador de degradado aleatorio
• Invertir dirección de degradado
• Exportar CSS listo para usar
• Procesamiento 100% del lado del cliente