Free · Fast · Privacy-first

Dark Mode Gradient CSS

Gradients designed for light mode do not simply invert for dark mode.

⚡

Generates gradients with colour values suited to dark backgrounds

🔒

Supports prefers-color-scheme: dark media query output

✨

Visual preview on a dark background canvas

⚡

Explains dark mode colour adjustment principles

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

FreeNo signupWhite-label

Add this Gradient to your website

Drop the Gradient into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/gradient?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Gradient by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/gradient?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Gradient by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

Dark Mode Gradient Design: Depth Without Harshness

Dark mode design is not about inverting light-mode colours. A vivid purple-to-pink gradient that communicates energy and brand vitality on a white page background becomes garish and overwhelming on a dark background because the lightness difference between the bright gradient and the surrounding dark UI chrome creates excessive visual contrast. Human visual systems adapt to overall ambient luminance: in a dark-mode interface, elements that would be considered normally vibrant in a light context become perceptually harsh because there is no bright environmental baseline to calibrate against. Effective dark mode gradients therefore use desaturated, medium-lightness colour values that provide visible colour interest against dark backgrounds without exceeding the moderate contrast threshold that comfortable dark mode reading requires. The practical adjustment is: reduce HSL saturation by 15 to 20 percentage points and reduce HSL lightness by 15 to 25 percentage points from the light-mode equivalent. The result is a gradient that reads as intentional, rich, and sophisticated against a dark background rather than neon, aggressive, or cheap.

The CSS technique for implementing dark mode gradients uses the @media (prefers-color-scheme: dark) media query. Define the default light-mode gradient outside the query, then override the gradient inside a dark-mode block. CSS custom properties are the most maintainable implementation: assign gradient colour values to :root variables such as --gradient-start and --gradient-end, then override those specific variable values inside the dark mode media query. The element rule background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end)) remains unchanged in the class or element selector, and the gradient adapts automatically to whichever variable values are in scope for the user's system colour scheme preference. This pattern keeps gradient definitions in one place, eliminates rule duplication, and makes updating both light and dark theme colours a simple variable substitution in the :root block.

FixTools generates dark-mode-appropriate gradient CSS including the primary gradient declaration and a @media (prefers-color-scheme: dark) override block. The tool also provides colour value recommendations calibrated specifically for dark background rendering, based on standard dark mode design principles. Copy the complete output and place it in your stylesheet. The dark mode override will activate automatically for users whose system preference is set to dark.

Dark mode design should also consider users who manually toggle themes via a button rather than relying solely on the system preference media query. The most common pattern is a data-theme attribute on the html or body element that a JavaScript toggle switches between values like "light" and "dark". CSS rules then target [data-theme="dark"] selectors instead of (or in addition to) the prefers-color-scheme media query. The cleanest integration uses CSS custom properties with values defined under :root for the light default, redefined under [data-theme="dark"] for the manual dark mode, and optionally also redefined under @media (prefers-color-scheme: dark) :root:not([data-theme="light"]) for system-preference-aware dark mode that the user has not manually overridden. This three-tier pattern respects both the user's manual selection and the system default, which is the behaviour most users intuitively expect from a theme toggle.

MDN prefers-color-scheme media feature W3C CSS Color Level 4: oklch colour space

How to use this tool

💡

Configure a gradient for dark backgrounds. Example: background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)

How It Works

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

1
Open the CSS Gradient Generator
Navigate to the FixTools CSS Gradient Generator. For dark mode gradients, the key starting point is the preview background: ensure the preview canvas is set to dark mode so you can evaluate your gradient colours against a dark background as you configure them, not against the white default preview background.
2
Enable dark mode preview
Switch the preview background to a dark canvas in the tool settings. Evaluating gradient colours against a dark background is essential because colours that look vibrant and attractive on a white preview can appear garish, fluorescent, or low-quality on an actual dark interface background. The dark preview reflects the real rendering environment your gradient will inhabit.
3
Configure dark-appropriate colours
Choose dark navy, midnight blue, deep slate, or muted mid-tone colour values for your gradient stops. Keep HSL saturation in the 45 to 70% range rather than the 80 to 95% range typical of light-mode gradients. Avoid pure black as any stop: use tones like #0f172a or #1e293b that have enough colour character to produce a visible and interesting directional shift against the surrounding dark UI.
4
Copy the gradient with media query output
Copy the complete output including both the default gradient rule and the @media (prefers-color-scheme: dark) override block. Place both blocks in your stylesheet. The default rule applies in light mode; the dark mode block overrides it automatically for users whose system preference is set to dark, without requiring any JavaScript or manual class toggling.

Real-world examples

Common situations where this approach makes a real difference:

Dark mode hero section for a developer tool

A developer tooling product page defaults to dark mode because its target audience of software engineers strongly prefers dark interfaces. The hero section uses a subtle three-stop gradient: #0d1117 at 0%, #161b22 at 50%, and #1f2937 at 100%. The near-identical dark tones create a perceptible depth shift that makes the hero feel dimensional rather than flat, without any colour that reads as harsh or bright on the dark canvas. Headline text uses rgba(255,255,255,0.9) rather than pure white to soften glare and reduce eye strain for extended sessions.

System-preference-aware pricing section

A SaaS pricing page must look equally polished in both light and dark mode because it serves a mixed audience across operating system preferences. In light mode, the featured plan card uses a vivid indigo-to-purple gradient at HSL(240, 80%, 60%) to HSL(280, 75%, 55%). The CSS custom property pattern switches these values inside a dark mode media query to a desaturated deep navy-to-dark-violet pair at HSL(240, 45%, 28%) to HSL(280, 40%, 25%). The hue identity of the brand is preserved while the saturation and lightness are adjusted to the dark mode context.

Dashboard sidebar gradient accent

An analytics dashboard has a left navigation sidebar in dark mode and needs a top-edge gradient accent to add brand colour without overwhelming the sidebar menu items. The gradient runs from dark teal (#0d4a4a) at the top to transparent using the rgba correction technique, spanning the first 80px of the sidebar height. The teal is derived from the light-mode brand green but with HSL lightness reduced from 65% to 40% and saturation from 80% to 55%, keeping the brand connection visible on the dark surface without the green appearing fluorescent or unpleasantly bright against the dark sidebar background.

Dark mode card component with gradient depth

Data cards in a dark mode analytics dashboard use a top-to-bottom gradient from #1e293b at the top to #0f172a at the bottom, applied at height: 180px per card. The gradient simulates natural top-down lighting by making the top of the card surface slightly lighter than the bottom, which aligns with how humans intuitively perceive illuminated objects. Cards are visually distinct from the #050a11 page background, creating a clear figure-ground separation that makes the dashboard layout easy to parse even at a distance or in low-ambient-light environments.

When to use this guide

Use this when you are building a dark-mode UI or designing a site that supports prefers-color-scheme: dark and need gradients that look polished on dark backgrounds.

Pro tips

Get better results with these expert suggestions:

Reduce saturation by 15 to 20 points for dark mode gradients

Vivid, high-saturation gradients on dark backgrounds produce an unpleasant neon-on-black effect that signals low quality and visual immaturity to experienced dark mode users. Dropping HSL saturation by 15 to 20 percentage points while keeping the hue constant preserves the colour identity and brand recognisability of the gradient while toning it down to a comfortable level for dark contexts. A brand blue at HSL(220, 90%, 60%) in light mode becomes a calmer and more sophisticated HSL(220, 70%, 45%) in dark mode, which reads as considered and polished against a near-black background.

Use dark navy or deep slate tones for gradient endpoints

Dark mode gradients that use near-pure black (#0a0a0a or #111111) as one of the colour stops produce gradients that are barely distinguishable from a flat black background, because there is insufficient lightness contrast between the stop and the surrounding UI. Use dark navy (#0f172a), deep slate (#1e293b), midnight blue (#1a1a2e), or deep ocean (#0a192f) as the darker endpoint. These tones have enough colour character and lightness to produce a visible and interesting directional shift even against dark backgrounds.

Define dark and light gradient variants as CSS custom properties

Place gradient colour values in :root CSS custom properties with descriptive names like --g-start and --g-end. Override only these variable values inside the dark mode media query: :root { --g-start: #667eea; --g-end: #764ba2; } @media (prefers-color-scheme: dark) { :root { --g-start: #2d3561; --g-end: #3b1f5e; } }. The element rule background: linear-gradient(135deg, var(--g-start), var(--g-end)) stays unchanged. Updating both themes in the future requires only editing variable values in the :root block, not searching through every gradient rule across the stylesheet.

Add a subtle noise texture over dark gradients for depth

Flat dark gradients can look visually muddy or indistinct on OLED screens because very dark colours occupy a narrow perceptual lightness range. Layering a semi-transparent noise texture over the dark gradient using a second background layer adds micro-contrast that makes the gradient surface feel tactile and three-dimensional. Keep the noise opacity very low, between 4% and 8%, so it adds texture without obscuring or competing with the underlying gradient colours. SVG-based noise patterns encoded as base64 data URIs are the most portable method for this technique.

FAQ

Frequently asked questions

Use dark, desaturated colour values for gradient stops rather than inverting or darkening light-mode colours directly. Dark navy tones like #0f172a, deep slate like #1e293b, and midnight tones like #1a1a2e produce attractive and legible dark mode gradients. Combine them with a @media (prefers-color-scheme: dark) override block that replaces the light-mode gradient values: @media (prefers-color-scheme: dark) { .hero { background: linear-gradient(135deg, #0f172a, #1a1a2e); } }. For maintainability across a full design system, use CSS custom properties for gradient colour values and override only the variables inside the dark mode block.

High-saturation gradients create excessive perceptual contrast on dark backgrounds because vivid colours have high luminance relative to the near-zero luminance of dark UI backgrounds. On OLED screens in particular, dark backgrounds have essentially zero light emission, making any vivid gradient appear to glow strongly against the surrounding interface. The visual result reads as garish or fluorescent rather than polished. Reducing HSL saturation by 15 to 20 percentage points and lightness by 10 to 20 percentage points brings vivid gradients to a range that reads as intentional and sophisticated in dark mode rather than harsh and poorly considered.

Define the light mode gradient in the default element rule outside any media query. Inside @media (prefers-color-scheme: dark), override the same element rule with dark-appropriate gradient colour values: .section { background: linear-gradient(135deg, #667eea, #764ba2); } @media (prefers-color-scheme: dark) { .section { background: linear-gradient(135deg, #1a1a2e, #0f3460); } }. For better maintainability, use CSS custom properties: assign gradient colours to :root variables and override only the variable values inside the dark mode block. The element rule itself needs no duplication.

Dark navy and deep slate tones are reliable starting points: #0a0f1e (deep space), #0f172a (slate 900), #1e293b (slate 800), #1a1a2e (midnight navy), and #16213e (dark ocean blue) work well as the darker gradient endpoint. For the lighter or more colourful stop, muted mid-tones like #2d3748 (cool grey), #312e81 (dark indigo), #1e3a5f (deep ocean blue), or #1f2d3d (dark slate teal) provide colour interest without harsh contrast. Avoid bright or saturated values such as vivid pink, bright yellow, or pure white as any stop in a dark mode gradient.

Not with a single static gradient declaration, but you can effectively support both with a single element rule using CSS custom properties. Define :root { --g-start: #667eea; --g-end: #764ba2; } for light mode and override those variables in @media (prefers-color-scheme: dark) { :root { --g-start: #1a1a2e; --g-end: #0f3460; } }. Your element rule background: linear-gradient(135deg, var(--g-start), var(--g-end)) then adapts automatically to the active colour scheme preference without any duplication of the gradient rule itself or any JavaScript involvement.

OLED screens display near-zero luminance for very dark colours, which can make subtle dark-on-dark gradients nearly invisible. Ensure the darkest gradient stop is no darker than approximately #0a0f1e and that the lighter stop has an HSL lightness value at least 10 to 15 percentage points higher. Adding a distinct colour hue difference between the two stops (for example, very dark navy versus very dark teal) provides colour contrast that remains visible on OLED even when the absolute lightness difference between the stops is small. A perceptible hue shift reads well on OLED even at very low lightness values.

Yes, and it is worth the effort. OLED screens, standard LCD screens, and HDR-capable displays all render dark colours and gradients differently. A gradient that looks visually distinct and well-calibrated on a standard calibrated desktop monitor can appear nearly uniform black on an older LCD panel with poor dark performance, or alternatively as an intense luminous stripe on a high-brightness HDR display. Test on at least one OLED mobile screen (common on flagship smartphones), one laptop LCD, and one external monitor. Browser DevTools dark mode emulation is useful for initial development but does not replicate actual display hardware behaviour accurately enough for final visual decisions.

Yes, and HSL is arguably the most intuitive colour format for systematic dark mode adjustments. If your light mode gradient stop is hsl(220, 90%, 60%), the dark mode equivalent is straightforwardly derived by reducing lightness to approximately 35% and saturation to approximately 65%: hsl(220, 65%, 35%). The hue remains identical, preserving brand colour identity. CSS custom properties can store individual HSL channel values: --g-h: 220; --g-s: 90%; --g-l: 60%; and reference them as hsl(var(--g-h), var(--g-s), var(--g-l)). Override only --g-s and --g-l inside the dark mode media query for per-channel control over the dark mode adjustment.

Use a data attribute on the root element to represent the manually selected theme, and write CSS rules against that attribute in addition to the prefers-color-scheme media query. The JavaScript toggle sets document.documentElement.setAttribute("data-theme", "dark") or "light" based on the user's choice and persists the value to localStorage. CSS defines light-mode variables under :root by default, dark-mode overrides under [data-theme="dark"], and a system-preference fallback inside @media (prefers-color-scheme: dark) :root:not([data-theme]). This pattern means a user who has not interacted with the toggle gets their system preference, while a user who has chosen a specific theme gets that choice regardless of system setting, which is the behaviour most users expect.

A flat dark colour is simpler, requires zero gradient calibration, and avoids any risk of banding on lower-end displays. The cost is that the surface feels static and lacks the perceived depth that distinguishes a polished dark-mode UI from a basic one. A well-calibrated dark gradient adds enough subtle directional shift to suggest material depth without crossing into the harsh territory of vivid colour. The decision depends on the design language: minimal interfaces benefit from flat dark colours that read as quiet and uncluttered, while richer product surfaces benefit from gradients that signal craft and intentional visual design. For data-dense dashboards where content should dominate, lean toward flat. For marketing and product hero sections, lean toward calibrated dark gradients.