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 conico (conic-gradient). Cada uno tiene caracteristicas visuales y casos de uso diferentes.
Lineal: transicion a lo largo de una direccion. Define el angulo (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 comun es el header hero o el fondo de seccion.
Radial: se irradia desde un punto central hacia el exterior en forma circular o eliptica. Perfecto para efectos spotlight, fondos con profundidad visual o highlights en elementos interactivos.
Conico: los colores rotan alrededor de un punto central como los radios de una rueda. Menos usado, pero excelente para graficos de tarta CSS, patrones geometricos y efectos holo.
Chromaforge genera el c?digo CSS exacto con prefijos vendor donde sea necesario, y permite elegir los color stops directamente desde la paleta generada. La previsualizacion es en tiempo real: cambia angulo, posicion y colores sin tocar c?digo.
Ejemplos prácticos
- Seccion hero: gradiente lineal desde el color de marca hasta una variante oscura, inclinado a 135deg — clasico 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.
- Boton glossy: gradiente lineal vertical desde blanco semitransparente (10%) a transparente sobre el color solido del boton — efecto material con una linea de CSS.
- Fondo mesh/noise: multiples gradientes radiales superpuestos con
backgroundmultiples crean el efecto "mesh gradient" muy popular en 2024-25.
FAQ — Gradientes CSS
¿Por que 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 solucion es agregar un stop intermedio con un hue m?s vivido, o usar la interpolacion en espacio OKLCH (in oklch) disponible en navegadores modernos. Chromaforge muestra la previsualizacion con interpolacion OKLCH opcional.
¿Puedo usar transparent como color stop?
Si, pero atencion: transparent en CSS es rgba(0,0,0,0), es decir negro transparente. Si hay disolucion hacia transparente desde un color vivido, el borde parecera 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 patron con stops explicitos. Ejemplo: repeating-linear-gradient(45deg, #333 0px, #333 10px, #555 10px, #555 20px) crea rayas diagonales.
¿Los gradientes CSS funcionan como fondos de texto?
Si, con la tecnica background-clip: text; -webkit-background-clip: text; color: transparent. El texto muestra el gradiente como relleno. Funciona bien para titulos display, evitar para texto de cuerpo porque puede reducir la legibilidad.
¿Como exporto el gradiente a Figma?
Figma no importa CSS directamente, pero puedes insertar manualmente los color stops y el angulo en el panel Fill de Figma. Para gradientes complejos, el plugin "CSS to Figma" o "Figma Tokens" automatizan el proceso.