How do I make a CSS gradient respond to dark mode?

Use the @media (prefers-color-scheme: dark) media query to apply a different gradient in dark mode. Define the default (light) gradient outside the media query and the dark variant inside it.

What colours work best for dark mode gradients?

Deep navy blues, dark teals, dark purples, and near-black shades work well. Avoid pure black as a gradient stop — dark navy or dark grey creates a richer, less harsh dark background.

Can I use CSS custom properties to switch gradients for dark mode?

Yes. Define colour variables in :root and override them in a @media (prefers-color-scheme: dark) block, then use those variables in your gradient: background: linear-gradient(var(--grad-start), var(--grad-end)).

Should I use a light or dark gradient for a dark mode hero section?

Use dark gradients for hero backgrounds in dark mode. A gradient from dark navy (1a1a2e) to slightly lighter dark blue (0f3460) provides depth without harsh contrast.

How do I test dark mode CSS in the browser?

In Chrome DevTools, open the Rendering tab and set "Emulate CSS media feature prefers-color-scheme" to dark. In Firefox, use the sun/moon toggle in DevTools. In Safari, use the "Force Dark Appearance" option under the Rendering inspector.

Browse tools

Free · Fast · Privacy-first

Dark Mode CSS Gradient Generator

Gradients designed for light mode often look washed out or harsh in dark mode. FixTools helps you design gradient pairs — one for light mode, one for dark mode — that switch automatically using the CSS prefers-color-scheme media query, ensuring your design looks polished in both themes.

⚡ Use Tool Now How it works

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

⚡

Generates light and dark gradient variants

🔒

Uses prefers-color-scheme for automatic switching

✨

Recommended dark-mode colour palette guidance

CSS Tool

Gradient

All processing happens in your browser — your files are never uploaded to any server.

🚀Open Gradient

100% Free · No account · Works on any device

How to use this tool

💡

Generate dark mode gradient CSS: @media (prefers-color-scheme: dark) { .hero { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); } } with a light mode variant outside the media query.

How It Works

Step-by-step guide to dark mode css gradient generator:

1
Design your light mode gradient
Create your primary gradient using the gradient generator. This is the default (light mode) version.
2
Design a dark mode variant
Create a darker version of the gradient. For dark mode, use deep, desaturated colours like navy blues, dark greys, and muted purples rather than bright colours.
3
Wrap light mode in the default class
Apply the light mode gradient to your element class without a media query: .element { background: linear-gradient(light-mode-gradient); }
4
Add the dark mode override
Add the dark variant inside the media query: @media (prefers-color-scheme: dark) { .element { background: linear-gradient(dark-mode-gradient); } }
5
Test both modes
Toggle your OS between light and dark mode (or use browser DevTools) to verify both gradients render correctly.