Generador de Gradientes CSS

Sobre los gradientes CSS

Un gradiente CSS es una interpolación suave entre dos o más colores pintada directamente por el navegador — sin necesidad de imagen. Los gradientes lineales recorren una línea recta en el ángulo que elijas; los gradientes radiales irradian desde un centro hacia afuera. Cada parada de color tiene una posición del 0% al 100% sobre la línea del gradiente. Por defecto el navegador mezcla en sRGB, así que cuanto mayor sea el contraste entre paradas vecinas, más visible será la franja de tonos intermedios.

Cómo usar el generador

Elige el tipo de gradiente; para lineal ajusta el ángulo (0° apunta hacia arriba, 90° a la derecha, 180° hacia abajo). Cada fila de Paradas de color tiene un selector y una posición — arrastra el control, escribe un porcentaje o pulsa Añadir parada para insertar un color nuevo. Aplica un Preset si solo quieres un punto de partida rápido. El cuadro de CSS bajo la vista previa muestra la declaración background exacta; pulsa Copiar y pégala en tu hoja de estilos.

Consejos de diseño

Los gradientes de dos paradas entre colores análogos (cercanos en el círculo cromático) resultan tranquilos y modernos. Los de tres paradas con un acento en medio aportan riqueza pero se enturbian fácilmente — mantén una saturación parecida en todas. Para fondos oscuros de UI combina un casi-negro con un matiz oscuro a muy bajo contraste (5–10% de diferencia de luminosidad) para que el gradiente se intuya más que se vea. Comprueba siempre con el contenido real encima — el texto necesita al menos 4.5:1 de contraste en cualquier región del gradiente que atraviese.

Preguntas frecuentes

¿Cuántas paradas puedo añadir?

La herramienta limita a cinco paradas, lo que cubre prácticamente cualquier gradiente de UI que vayas a publicar. El propio CSS no impone un límite, pero a partir de 4–5 paradas sueles perder más en suciedad de lo que ganas en detalle. Para transiciones fotográficas, considera una malla SVG o una imagen real.

¿Por qué mi gradiente lineal se ve distinto en otra herramienta?

Las herramientas a veces interpretan el ángulo de forma distinta — la especificación CSS usa 0° hacia arriba y 90° a la derecha, pero la sintaxis antigua de Webkit tenía otra referencia. La salida aquí usa la forma moderna linear-gradient(<ángulo>deg, ...), que funciona en todo navegador actual sin prefijos.

¿Puedo usar esto en modo oscuro?

Sí — combina el gradiente con @media (prefers-color-scheme: dark) en tu CSS y elige un juego de paradas más oscuro. También puedes envolver la declaración en variables CSS y cambiar los valores por tema, lo que deja intacto el resto de tu CSS.

¿Los gradientes afectan al rendimiento?

En hardware moderno, no — se pintan en la GPU como cualquier otro fondo. Donde podrías notar coste es en gradientes radiales enormes a pantalla completa animados a 60fps o en móviles muy antiguos. Para el fondo de un panel estático el coste es despreciable.

¿Se puede animar un gradiente?

CSS no anima background-image directamente, pero puedes animar background-position sobre un gradiente sobredimensionado o usar @property con variables personalizadas para interpolar los colores de las paradas. En cualquier caso, ofrece un fallback de movimiento reducido para quienes lo pidan.

¿Los gradientes radiales se admiten en todas partes?

Sí. linear-gradient() y radial-gradient() existen en todos los navegadores principales desde hace más de una década. La salida aquí usa la forma estándar (sin prefijos) y funciona incluso en los primeros navegadores evergreen.

Generador de Gradientes CSS