Generador de Gradientes CSS

El Generador de Gradientes CSS crea código de gradiente listo para pegar en una hoja de estilos: gradientes lineales con ángulo personalizable, radiales circulares y cónicos rotacionales, todos con soporte para múltiples color stops en posiciones exactas. Incluye 10 presets curados y un generador aleatorio.

Diferencias entre gradiente lineal, radial y cónico

El gradiente cónico de CSS (conic-gradient) permite crear gráficos de torta completos sin JavaScript ni SVG, usando solo CSS puro. Compatible con Chrome 69+, Firefox 83+ y Safari 12.1+.

Un gradiente lineal (linear-gradient) transiciona colores en línea recta entre dos puntos. El ángulo de 0° va de abajo hacia arriba; 90° va de izquierda a derecha; 135° va en diagonal. Es el tipo más común en fondos de botones, hero sections y barras de progreso.

El gradiente radial (radial-gradient) emana desde un punto central hacia afuera en forma circular o elíptica. Se usa en efectos de luz (como un foco sobre un fondo oscuro), en botones con efecto de brillo central y en fondos que simulan profundidad. La posición del centro es configurable (centro, esquinas, coordenadas exactas).

El gradiente cónico (conic-gradient) rota los colores alrededor de un punto central, como las agujas de un reloj. Permite crear gráficos de torta puras en CSS sin canvas ni SVG, selectores de color circulares y efectos de 'halo' o 'arcoíris'. El soporte en navegadores es excelente: Chrome 69+, Firefox 83+, Safari 12.1+ y Edge 79+.

Color stops: control fino de la transición

Un color stop define en qué posición del gradiente aparece cada color y cómo transiciona hacia el siguiente. La sintaxis en CSS es linear-gradient(90deg, #ff0000 0%, #0000ff 100%). Agregar stops intermedios permite crear gradientes de tres, cuatro o más colores: linear-gradient(90deg, red 0%, yellow 33%, green 66%, blue 100%).

La posición del color stop puede definirse en porcentaje, píxeles o cualquier unidad CSS. Dos stops en la misma posición crean un corte duro sin transición, útil para crear rayas o segmentos de color sólido dentro de un gradiente. Por ejemplo, linear-gradient(red 50%, blue 50%) crea dos mitades de color sólido.

Para crear gradientes con 'pausa' (un área de color sólido entre dos transiciones), se usan dos stops del mismo color consecutivos: linear-gradient(red, red 40%, blue 60%, blue) crea rojo sólido hasta el 40%, transición de 40% a 60%, y azul sólido desde el 60%.

• ▸2 stops: gradiente básico entre dos colores
• ▸3-4 stops: gradientes multicolor (sunset, océano, arcoíris)
• ▸Stops en misma posición: corte duro sin transición
• ▸Stops repetidos: área de color sólido dentro del gradiente

Los 10 presets curados y cómo usarlos como base

Los presets incluidos (sunset, ocean, purple, rainbow, mint, pink, gold, dark, neon, fire) son combinaciones de colores probadas que funcionan bien en UI. Son un punto de partida, no un destino: al seleccionar un preset, el editor muestra los stops exactos que lo componen, permitiendo ajustar los colores, el ángulo o las posiciones para adaptarlo a la paleta del proyecto.

En diseño de interfaces, los gradientes dark y neon son populares para paneles de administración y dashboards tech; mint y pink para apps de salud y bienestar; gold para productos de lujo o finanzas. El preset rainbow con conic-gradient es el punto de partida ideal para selectores de color en interfaces de configuración.

Cómo funciona — paso a paso

1. 1
   Seleccionar el tipo de gradiente

   Elige entre lineal, radial o cónico según el efecto que buscas. Lineal para fondos y botones; radial para efectos de luz; cónico para gráficos o arcoíris.
2. 2
   Configurar colores y posiciones

   Agrega color stops con el color picker integrado y define la posición de cada uno en porcentaje. Mínimo 2 stops.
3. 3
   Ajustar ángulo o posición central

   Para gradientes lineales, ajusta el ángulo (0°-360°). Para radiales y cónicos, configura el punto central.
4. 4
   Copiar el código CSS

   Usa el botón de copia para obtener el código listo para pegar en tu archivo CSS o en el editor de tu framework favorito.