Generador de gradiente

Crea CSS degradados con colores, ángulos y tipos de degradado personalizados.

Banco de trabajo interactivo CSS

Construye el degradado

Tipo de gradiente

Ángulo de dirección135deg

grados

De dos a seis paradas, mantenidas en orden de posición.

Detener 1

%

Detener 2

%

Detener 3

%

Lineal

CSS salida

.gradient-background {
  background-color: #0F766E;
  background-image: linear-gradient(135deg, #0F766E 0%, #F59E0B 52%, #172033 100%);
}

La vista previa y ambas acciones de copia utilizan el mismo valor de gradiente generado.

Esta herramienta se ejecuta en su navegador y no requiere una cuenta.

¿Puedo copiar el CSS?

Sí. El degradado generado incluye un valor de fondo CSS listo para copiar.

¿Esto necesita una cuenta?

No. Es gratuito y está basado en navegador.

Continúa con otra herramienta basada en navegador.

Gd Herramientas de diseño gratuitas

Cree paletas de colores prácticas a partir de un color base y copie variables HEX, RGB, HSL o CSS.

Gd Herramientas de diseño gratuitas

Extrae los colores dominantes de una imagen usando el procesamiento canvas del navegador local.

Gd Herramientas de diseño gratuitas

Elige un estilo y obtén combinaciones prácticas de fuentes para encabezados, cuerpos y acentos con fragmentos de CSS.