Generador Gradiente CSS Gratis: Crear Degradados Lineales Radiales

A Sí, añade paradas de color adicionales para gradientes más complejos.

A Los degradados lineales fluyen en línea recta, ya sea horizontal, vertical o diagonalmente. Controlas la dirección con el control deslizante de ángulo, como establecerlo en 90 grados para un desvanecimiento vertical. Los degradados radiales se expanden hacia afuera desde un punto central, creando un efecto circular u ovalado. No puedes controlar directamente la forma más allá de lo circular con esta herramienta, pero puedes elegir dónde está el centro.

A La herramienta genera CSS estándar que funciona en Chrome, Firefox, Safari y Edge. Internet Explorer 9 y anteriores no muestran degradados, pero eso es menos del 1% del tráfico global hoy. Para navegadores antiguos, añade un color de fondo sólido como fallback en tu CSS antes de la propiedad de degradado. Así los usuarios verán un color plano si no hay soporte para degradados. Prueba rápida: pega tu código en las herramientas de desarrollador de cualquier navegador moderno para verificarlo.

A Las bandas ocurren cuando la transición de color parece rayas en lugar de una mezcla suave. Esto pasa si tu degradado abarca demasiados píxeles sin suficientes paradas de color. Para una sección hero de ancho completo, añade una tercera parada de color entre tus dos colores principales. En fondos grandes (1920px+), prueba background-attachment: fixed para reducir el banding visual. El generador entrega un código limpio, pero los navegadores limitan el renderizado. Truco rápido: usa colores con brillo similar para suavizar la transición.

A Tu degradado respetará la configuración de alto contraste del sistema, pero la herramienta no la simula. Los problemas de contraste aparecen cuando dos colores tienen luminosidad similar, como el amarillo pastel junto al rosa pálido. Revisión rápida: convierte ambos códigos hex a HSL y verifica que sus valores L difieran por al menos 30 puntos. Para secciones hero, prueba tu degradado en el modo de alto contraste de Windows o con una extensión como Axe. Los 12 preajustes fueron elegidos pensando en accesibilidad, pero los colores personalizados son tu responsabilidad.

A Esta versión no incluye guardado, lo siento. Truco rápido: pega el CSS generado en un archivo de texto, un snippet de CodePen o el panel de snippets de las herramientas de desarrollo. Muchos diseñadores crean un archivo "gradients.css" en su proyecto con 5 a 10 favoritos listos para usar. Te toma 10 segundos la primera vez y te ahorra rehacerlos cada semana.

A Sí, pero esta herramienta no escribe el código de animación. Devuelve una propiedad background-image estática. Para animarla, debes envolverla en una regla @keyframes que desplace background-position o cambie los colores con el tiempo. Truco común: haz que el fondo degradado sea 3 veces más ancho que el elemento y anima background-position de 0 a 100%. Obtienes una ola de color suave, ideal para spinners de carga o secciones principales.

A Mueve el control deslizante de ángulo a 90 grados y el degradado pasa de izquierda a derecha a arriba a abajo. Con 180 grados lo inviertes por completo. Para un efecto diagonal, prueba 45 o 135 grados, muy usados en secciones hero. La vista previa se actualiza en tiempo real, así que ves el cambio al instante. No toques los topes de color a menos que quieras un balance distinto.

A No, el generador solo produce código CSS. Para maquetas, toma una captura de pantalla de la vista previa o copia los valores hex en tu herramienta de diseño. Figma y Sketch aceptan degradados CSS nativamente. Si necesitas una imagen rasterizada, pon el ángulo en 180 grados y usa la captura de tu sistema con zoom al 200%. Así consigues un recurso nítido en 2x. Los colores coinciden exactamente entre navegador y software, por lo que tu maqueta se mantiene fiel.

A No, la herramienta solo genera la declaración completa de background-image. Pero puedes recortarla manualmente: toma el contenido entre paréntesis después de linear-gradient y colócalo como `background: linear-gradient(...)`. Eso ahorra unos 30 caracteres por regla. Para bocetos rápidos, algunos diseñadores pegan el código completo en un conversor de CSS a JSON. Consejo: quédate con la versión completa, es más legible y fácil de depurar. La forma corta ahorra bytes, la larga ahorra dolores de cabeza.