Generador de gradientes CSS
Crea gradientes CSS lineales, radiales y cónicos desde una paleta.
Cómo ayuda
Crea gradientes CSS lineales, radiales y cónicos desde una paleta.
- Genera paletas desde un color base.
- Comprueba el contraste antes de publicar texto UI.
- Exporta CSS, Tailwind, SCSS, JSON, SVG y PNG.
- Funciona localmente en el navegador.
Cómo funciona el generador de gradientes CSS
CSS soporta tres tipos principales de gradiente: lineal (linear-gradient), radial (radial-gradient) y cónico (conic-gradient). Cada uno tiene características visuales y casos de uso diferentes.
Lineal: transición a lo largo de una dirección. Define el ángulo (0deg = de abajo hacia arriba, 90deg = de izquierda a derecha) y al menos dos color stops. Puedes agregar más stops para gradientes multicolor. El caso de uso más común es el header hero o el fondo de sección.
Radial: se irradia desde un punto central hacia el exterior en forma circular o elíptica. Perfecto para efectos spotlight, fondos con profundidad visual o highlights en elementos interactivos.
Cónico: los colores rotan alrededor de un punto central como los radios de una rueda. Menos usado, pero excelente para gráficos de tarta CSS, patrones geométricos y efectos holo.
Chromoforge genera el código CSS exacto con prefijos vendor donde sea necesario, y permite elegir los color stops directamente desde la paleta generada. La previsualización es en tiempo real: cambia ángulo, posición y colores sin tocar código.
Ejemplos prácticos
- Sección hero: gradiente lineal desde el color de marca hasta una variante oscura, inclinado a 135deg — clásico pero siempre efectivo para landing pages.
- Card con highlight: gradiente radial sutil en el borde superior simula una luz interna en las cards de dark mode.
- Botón glossy: gradiente lineal vertical desde blanco semitransparente (10%) a transparente sobre el color sólido del botón — efecto material con una línea de CSS.
- Fondo mesh/noise: múltiples gradientes radiales superpuestos con
backgroundmúltiples crean el efecto "mesh gradient" muy popular en 2024-25.
FAQ — Gradientes CSS
¿Por qué mi gradiente parece "gris sucio" en el centro?
Es el problema del "muddy gradient": cuando interpolos dos colores en espacio RGB entre hues distantes (por ejemplo azul y amarillo), el punto medio pasa por tonos neutros poco atractivos. La solución es agregar un stop intermedio con un hue más vivido, o usar la interpolación en espacio OKLCH (in oklch) disponible en navegadores modernos. Chromoforge muestra la previsualización con interpolación OKLCH opcional.
¿Puedo usar transparent como color stop?
Sí, pero atención: transparent en CSS es rgba(0,0,0,0), es decir negro transparente. Si hay disolución hacia transparente desde un color vivido, el borde parecerá oscurecerse. Usa en su lugar la versión con alfa de tu color base: rgba(37, 99, 235, 0).
¿Cómo creo un gradiente que se repite?
CSS tiene repeating-linear-gradient y repeating-radial-gradient. Debes especificar el tamaño del patrón con stops explícitos. Ejemplo: repeating-linear-gradient(45deg, #333 0px, #333 10px, #555 10px, #555 20px) crea rayas diagonales.