How do I use one of these gradients?

Click a swatch (or its copy button) to copy the CSS value, then paste it as the `background` property of any element. It works in every current browser without a prefix.

Can I adjust the angle or colors?

Yes. Open the gradient tool and start from a preset or build your own, with a live preview and one-click copy of the final `background` value.

Do these work as a background-image too?

Yes. `linear-gradient()` and `radial-gradient()` values are valid for both `background` and `background-image`, so use whichever your CSS already targets.

Is anything uploaded or tracked?

No. This page and the gradient tool run entirely in your browser; nothing is sent anywhere.

CSS gradient presets

A curated set of ready-to-use CSS gradients. Click a swatch to copy the `background` value, or open the gradient tool to fine-tune the angle and colors.

Open the tool →

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%)

FAQ

How do I use one of these gradients?: Click a swatch (or its copy button) to copy the CSS value, then paste it as the `background` property of any element. It works in every current browser without a prefix.
Can I adjust the angle or colors?: Yes. Open the gradient tool and start from a preset or build your own, with a live preview and one-click copy of the final `background` value.
Do these work as a background-image too?: Yes. `linear-gradient()` and `radial-gradient()` values are valid for both `background` and `background-image`, so use whichever your CSS already targets.
Is anything uploaded or tracked?: No. This page and the gradient tool run entirely in your browser; nothing is sent anywhere.

Mr. Latte