Generador de degradados CSS

Acerca del Generador de degradados CSS

Esto construye un degradado CSS visualmente y te da el código exacto para pegar en tu hoja de estilos. En lugar de adivinar valores de color y ángulos a mano, eliges dos colores y una dirección, ves cómo se actualiza la vista previa en vivo, y copias la regla background cuando se ve bien. Es útil para botones, secciones hero, fondos de tarjetas, banners y cualquier elemento de UI que necesite una transición de color suave.

Cómo funciona

Eliges dos colores y un tipo de degradado:

• Lineal — los colores se mezclan a lo largo de una línea recta en un ángulo que tú defines (0–360°), así puedes hacer que el degradado vaya de arriba a abajo, de izquierda a derecha, en diagonal, o en cualquier dirección.
• Radial — los colores se mezclan hacia afuera desde el centro en forma de círculo.

El panel de vista previa muestra el resultado de inmediato, y el cuadro de salida te da CSS listo para usar como background: linear-gradient(45deg, #…, #…); para copiar directamente en tus estilos.

Supuestos y comportamiento

• Produce un degradado de dos colores (un color inicial y uno final).
• Los degradados lineales usan un ángulo en grados; 0° apunta hacia arriba, 90° hacia la derecha, siguiendo la convención de CSS.
• Los degradados radiales se mezclan desde el centro hacia afuera como un círculo; el control de ángulo se oculta porque no aplica.
• El CSS generado es estándar y funciona en todos los navegadores modernos sin prefijos de proveedor.

Limitaciones

• Solo dos paradas de color. No admite degradados con tres o más paradas, posiciones de parada personalizadas, ni múltiples degradados en capas — para eso tendrías que editar el CSS a mano.
• Ofrece lineal y radial, no degradados cónicos ni repetitivos.
• Los degradados radiales usan el círculo centrado por defecto; no expone palabras clave de forma, tamaño o posición.
• Genera la declaración background; no maneja alternativas para navegadores muy antiguos (rara vez necesario hoy).

Privacidad

El degradado y su CSS se generan completamente en tu navegador. Nada se sube ni se almacena.