¿Algo va mal con esta herramienta?
Sobre «Generador De Degradados CSS Online»
Esta herramienta construye gradientes CSS lineales, radiales y cónicos visualmente. Añade paradas de color, elige dirección o ángulo, ajusta transparencia, y la herramienta genera el código CSS correspondiente listo para pegar en tu hoja de estilos.
Los gradientes están por todas partes en el diseño web moderno: fondos hero, estados de botones, acentos de tarjetas, texto degradado. Escribir a mano la sintaxis CSS es engorroso — la edición visual te permite experimentar transiciones suaves sin prueba y error.
La salida admite características modernas como múltiples paradas de color, posicionamiento por porcentaje, interpolación de tono en distintos espacios de color y gradientes cónicos para efectos circulares. Copia como CSS o como clase utility de Tailwind.
Cómo usar esta herramienta
Cómo armar una declaración CSS de linear-gradient con dos stops
Elige los stops
«Color 1» y «Color 2» aceptan cualquier color CSS: hex (`#1e3a8a`), rgb (`rgb(30 58 138)`), rgba con alfa o nombres (`navy`). Primer stop en 0%, segundo en 100%.
Ángulo
«Angle (deg)» fija la dirección en grados. `0` de abajo a arriba, `90` de izquierda a derecha, `180` de arriba a abajo (default CSS), `45` la diagonal clásica.
Ejecutar
Resultado: un único campo `css` — `linear-gradient(<angle>deg, <color1>, <color2>)`. Pega como valor de `background:` o `background-image:`.
Más de dos stops
Para radial, conic o 3+ stops edita la salida a mano — sintaxis `linear-gradient(45deg, #fff 0%, #000 50%, #f00 100%)`. O usa un editor de gradientes más completo; esta herramienta es deliberadamente mínima para linear de 2 stops.