Todo se ejecuta localmente en tu navegador. Nada se sube.

Generador de degradados CSS

Usa esta herramienta para crear degradados lineales y radiales con paradas editables. Los resultados se actualizan al instante y permanecen en tu dispositivo.

Todo se ejecuta localmente en tu navegador. Nada se sube.

Crea un degradado CSS

Tipo de degradado

Paradas de color

Vista previa del degradado

Generador de degradados CSS

Usa esta herramienta para crear degradados lineales y radiales con paradas editables.

El procesamiento ocurre en JavaScript dentro del navegador, así que puedes probar datos privados sin enviarlos a un servicio externo.

Cómo usar esta herramienta

  1. Elige un tipo de degradado

    Seleccione lineal o radial. Para degradados lineales, ajuste el control deslizante de ángulo.

  2. Editar paradas de color

    Elija colores, establezca posiciones de 0 a 100 por ciento y agregue o elimine paradas según sea necesario.

  3. Copia el CSS

    Obtenga una vista previa del degradado y copie la declaración background en su CSS.

FAQ

¿Este generador de gradiente CSS sube algo?

No. El degradado se genera localmente en su navegador.

¿Puedo crear degradados radiales?

Sí. Cambie el tipo de Lineal a Radial para generar un radial-gradient background.

¿Cuántas paradas de color puedo agregar?

Puede agregar varias paradas de color y establecer cada posición del 0 al 100 por ciento.

¿Qué CSS genera?

El resultado es una declaración background que puede pegar en una hoja de estilo o atributo style.