Generador de degradados CSS online gratis

El degradado CSS se ha convertido en la forma más ligera y flexible de decorar un fondo, un botón o una tarjeta. Ya no hace falta exportar un PNG desde un editor de imágenes: el navegador calcula la transición entre tus colores, en vectorial, en unas pocas decenas de bytes. El generador de degradados CSS de Volade produce el código exacto — ángulo, stops, posición de origen — mientras lo compones en pantalla.

linear-gradient: el degradado direccional

La función linear-gradient() recibe un ángulo seguido de los stops: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%). El ángulo 0deg apunta hacia arriba, 90deg a la derecha, 180deg hacia abajo. Sin ángulo, el navegador va de arriba hacia abajo. Es la sintaxis más usada para headers, botones de call-to-action y bandas de sección.

radial-gradient: el resplandor y la elipse

La función radial-gradient() parte de un punto (por defecto el centro) y se extiende en círculo o elipse. La posición de origen se escribe at X% Y%: radial-gradient(circle at 50% 50%, …). Perfecta para un efecto de resplandor detrás de un título, un fondo de hero centrado en el medio o una sombra suave sintética. La herramienta expone dos controles X y Y para colocar el origen al píxel.

conic-gradient: la rotación alrededor de un punto

La función conic-gradient() gira alrededor de un punto, como las agujas de un reloj. Se escribe conic-gradient(from 90deg at 50% 50%, …) y permite crear anillos, medidores circulares, bordes coloridos o efectos prismáticos. Cada stop ocupa un sector angular: al colocar varios colores, dibujas una tarta de datos CSS sin una sola imagen.

Los stops de color (color stops)

Cada stop asocia un color y una posición en porcentaje: #7a2fe2 0%, #a358ee 55%, #f3e8ff 100%. Posiciones idénticas en dos colores crean una transición dura (borde duro); posiciones separadas producen un fundido gradual. Más de dos stops permiten paletas multicolor, bandas o simulaciones de materiales (metal, nácar, aurora boreal).

Superponer un degradado y prever un fallback

En el atajo background, el orden importa: primero el plano principal. Un velo oscuro sobre foto se escribe background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,0)), url(photo.webp);. Coloca siempre un color sólido como fallback (background-color) para navegadores muy antiguos o mientras se carga la imagen.

Buenas prácticas de rendimiento

Un degradado CSS se recalcula en cada redimensionamiento: mantén razonable el número de stops (2 a 5 bastan en el 90 % de los casos) y evita las superposiciones múltiples sobre superficies muy grandes en móvil. Prefiere valores hexadecimales o HSL estables, y fija el ángulo en cuanto el diseño esté validado para evitar micro-diferencias entre navegadores.

Degradados con la identidad de Volade

Para construir una paleta coherente antes de crear los degradados, combina el generador de paletas y el selector de color : detecta los tonos de marca y pégalos aquí como stops. El resultado se copia directamente en tu CSS, tu design system o tu tema — en ordenador y en móvil, sin cuenta y sin envío de datos.