Generador de Gradientes CSS

¿Qué son los degradados CSS?

Los degradados CSS crean transiciones suaves y continuas entre dos o más colores sin usar imágenes. Se renderizan de forma nativa por el navegador, lo que significa que escalan a cualquier resolución, cargan al instante y producen cero peticiones HTTP. Los degradados son una de las herramientas más potentes del CSS moderno para crear fondos visuales ricos, botones y elementos decorativos.

Hay dos tipos principales de degradados CSS: lineales que transicionan a lo largo de una línea recta, y radiales que irradian desde un punto central. Un tercer tipo, los degradados cónicos, barren alrededor de un punto central como una rueda de color. Esta herramienta se centra en degradados lineales y radiales, que cubren la gran mayoría de las necesidades de diseño.

Sintaxis de degradados CSS

La función linear-gradient() toma una dirección (ángulo o palabra clave) seguida de puntos de color. La sintaxis básica es background: linear-gradient(ángulo, color1 posición1, color2 posición2). El ángulo está en grados: 0deg va de abajo arriba, 90deg de izquierda a derecha y 180deg de arriba abajo. Puedes añadir tantos puntos de color como necesites.

Los degradados radiales usan radial-gradient(forma tamaño at posición, color1, color2). La forma puede ser circle o ellipse. Las palabras clave de tamaño (closest-side, farthest-corner, etc.) controlan hasta dónde se extiende el degradado. Si se omite, el navegador usa valores por defecto que normalmente se ven correctos.

Cómo usar esta herramienta

Elige tus colores con los selectores, ajusta el ángulo del degradado con el deslizador o escribiendo un valor en grados, y añade o elimina puntos de color según necesites. La herramienta genera el código CSS en tiempo real. Haz clic en el botón de copiar para copiar la regla CSS completa al portapapeles y pégala en tu hoja de estilos.

Consejos de diseño para degradados

Los degradados sutiles se ven más profesionales que los dramáticos. Un cambio de 10-20 grados en tono entre dos colores muy relacionados crea un look elegante y moderno. Evita combinar más de tres colores a menos que estés creando intencionadamente un efecto arcoíris. Áreas grandes se benefician de degradados suaves, mientras que pequeños elementos de UI como botones admiten transiciones más audaces.

Para diseños en modo oscuro, las superposiciones de degradado sobre fondos oscuros añaden profundidad sin ser distractoras. Usa puntos de color semitransparentes (rgba o hsla) para crear efectos tipo cristal. Apila múltiples degradados usando comas en la propiedad background para composiciones complejas.

Consideraciones de rendimiento

Los degradados CSS están acelerados por GPU y son extremadamente eficientes, mucho mejor que cargar imágenes de degradado. Sin embargo, degradados muy complejos con muchos puntos de color pueden causar pequeñas diferencias de renderizado entre navegadores. Prueba siempre tus degradados en Chrome, Firefox y Safari. Los navegadores modernos admiten degradados sin prefijos de proveedor, por lo que -webkit-linear-gradient ya no es necesario.

Preguntas frecuentes

¿Puedo animar degradados CSS?

CSS no puede animar valores de degradado directamente con transition. Sin embargo, puedes animar la background-position de un degradado sobredimensionado, usar @property para animar propiedades personalizadas dentro de degradados, o hacer crossfade entre dos degradados usando opacity en pseudo-elementos.

¿Cuál es la diferencia entre degradados lineales y radiales?

Un degradado lineal hace una transición de colores a lo largo de una línea recta a un ángulo especificado. Un degradado radial hace una transición desde un punto central hacia fuera, en forma circular o elíptica. Elige lineal para fondos y banners, y radial para efectos de foco o resaltes en botones.