¿Cómo uso uno de estos degradados?

Haz clic en una muestra (o en su botón de copiar) para copiar el valor CSS y pégalo en la propiedad `background` de cualquier elemento. Funciona en todos los navegadores actuales sin prefijos.

¿Puedo ajustar el ángulo o los colores?

Sí. Abre la herramienta de degradados y parte de uno predefinido o crea el tuyo, con vista previa en tiempo real y la opción de copiar el valor final de `background` con un clic.

¿También funcionan como background-image?

Sí. Los valores `linear-gradient()` y `radial-gradient()` son válidos tanto para `background` como para `background-image`, así que usa la propiedad que ya tengas en tu CSS.

¿Se sube algún dato o se hace seguimiento?

No. Esta página y la herramienta de degradados funcionan por completo en tu navegador; no se envía nada a ningún sitio.

Degradados CSS predefinidos

Mr. Latte

Una selección de degradados CSS listos para usar. Haz clic en una muestra para copiar el valor de `background`, o abre la herramienta de degradados para ajustar el ángulo y los colores.

Abrir la herramienta →

Sunset

linear-gradient(135deg, #ff512f 0%, #f09819 100%)

Ocean

linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%)

Purple Haze

linear-gradient(135deg, #667eea 0%, #764ba2 100%)

Mint

linear-gradient(135deg, #00b09b 0%, #96c93d 100%)

Cherry

linear-gradient(135deg, #eb3349 0%, #f45c43 100%)

Midnight

linear-gradient(135deg, #232526 0%, #414345 100%)

Peach

linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)

Sky

linear-gradient(135deg, #00c6ff 0%, #0072ff 100%)

Forest

linear-gradient(135deg, #134e5e 0%, #71b280 100%)

Berry

linear-gradient(135deg, #c31432 0%, #240b36 100%)

Gold

linear-gradient(135deg, #f7971e 0%, #ffd200 100%)

Lavender

linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)

Steel

linear-gradient(135deg, #4b6cb7 0%, #182848 100%)

Rose

linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)

Emerald

linear-gradient(135deg, #11998e 0%, #38ef7d 100%)

Flamingo

linear-gradient(135deg, #f857a6 0%, #ff5858 100%)

Cobalt

linear-gradient(135deg, #0f2027 0%, #2c5364 100%)

Citrus

linear-gradient(135deg, #f2994a 0%, #f2c94c 100%)

Grape

linear-gradient(135deg, #41295a 0%, #2f0743 100%)

Aurora

linear-gradient(135deg, #43cea2 0%, #185a9d 100%)

Dusk

linear-gradient(135deg, #536976 0%, #292e49 100%)

Coral

linear-gradient(135deg, #ff6e7f 0%, #bfe9ff 100%)

Radial Glow

radial-gradient(circle, #ff9966 0%, #ff5e62 100%)

Radial Ice

radial-gradient(circle, #e0eafc 0%, #cfdef3 100%)

Preguntas frecuentes

¿Cómo uso uno de estos degradados?: Haz clic en una muestra (o en su botón de copiar) para copiar el valor CSS y pégalo en la propiedad `background` de cualquier elemento. Funciona en todos los navegadores actuales sin prefijos.
¿Puedo ajustar el ángulo o los colores?: Sí. Abre la herramienta de degradados y parte de uno predefinido o crea el tuyo, con vista previa en tiempo real y la opción de copiar el valor final de `background` con un clic.
¿También funcionan como background-image?: Sí. Los valores `linear-gradient()` y `radial-gradient()` son válidos tanto para `background` como para `background-image`, así que usa la propiedad que ya tengas en tu CSS.
¿Se sube algún dato o se hace seguimiento?: No. Esta página y la herramienta de degradados funcionan por completo en tu navegador; no se envía nada a ningún sitio.