Generador de Degradados

Crea degradados lineales y radiales con vista previa. Copia CSS.

Tipo

LinealRadial

Ángulo: 45°

Puntos de color

#ff5e3a%

#ff2d55%

CSS

background: linear-gradient(45deg, #ff5e3a 0%, #ff2d55 100%);

Tailwind (valor arbitrario)

bg-[linear-gradient(45deg,_#ff5e3a_0%,_#ff2d55_100%)]

Cómo funciona

Elige lineal o radial y añade paradas de color.
Arrastra las paradas y ajusta el ángulo o la posición con una vista previa en vivo.
Ajusta cada color.
Copia el degradado CSS.

Para qué se usa

Diseñar un degradado de fondo para una sección principal.
Obtener el CSS exacto de un degradado de varias paradas.
Experimentar con aspectos lineales frente a radiales.

Bueno saberlo

Genera un degradado CSS; las mallas extremadamente complejas van más allá de los degradados CSS estándar.
El renderizado del color puede variar ligeramente entre pantallas.

Preguntas frecuentes

¿Lineal o radial, cuál es la diferencia?

El lineal mezcla los colores a lo largo de un eje recto (ideal para fondos); el radial los mezcla hacia fuera desde un punto central (ideal para resplandores y focos).

¿Puedo añadir más de dos colores?

Sí: añade tantas paradas de color como quieras y coloca cada una a lo largo del degradado.

¿Se sube algo?

No. El CSS del degradado se genera en vivo en tu navegador.

Herramientas relacionadas

Visor DXF

Paleta de Colores

Conversor de Color

Generador de Box Shadow CSS

Verificador de Contraste