How to Add a Subtle Dark-Bottom Gradient to Any Background Color Using Pure CSS

TL;DR Summary: Create stylish gradients for website headers and footers using pure CSS, no JS needed. Easily enhance your design by blending a darker color at the bottom with the color-mix() function. Improve accessibility and compatibility with progressive enhancement. Check out the provided CSS snippets and try it out on your site today!

OK, this is super cool. It’s pure CSS, no JS.. and no BS. You can easily create a gradient in a website header, for example, and all you have to do is set the base color. Nice!

Small tweaks can make a header or footer look finished. Darkening the background a bit at the bottom adds depth and keeps text readable. You can do it with pure CSS using color-mix(). No JavaScript and no hex math.

The quick idea

Pick a base color and blend a slightly darker version at the bottom. We’ll do it with progressive enhancement so every browser shows something decent. Solid color first, classic gradient next, then the fancy HSL math for modern browsers.

Copy-paste CSS: rock solid then modern

This version works everywhere and upgrades itself when the browser supports CSS variables and color-mix().

/* Base cinematic header */
.gradient-top-bottom {
  /* 1) Always-works fallback */
  background-color: #2973C1; /* do not rely on var() here */
  color: #fff;
  padding: 2rem;           /* give it height so you can see the gradient */
  font-size: 1.25rem;      /* optional */
}

/* 2) Widely compatible gradient fallback (no color-mix, no CSS vars) */
.gradient-top-bottom {
  background-image:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0) 50%,
      rgba(0,0,0,0.18) 100%
    );
  background-repeat: no-repeat;
}

/* 3) Progressive enhancement for modern browsers */
@supports (color: var(--x)) and (color: color-mix(in hsl, black 50%, white 50%)) {
  .gradient-top-bottom {
    background: linear-gradient(
      to bottom,
      /* slightly lighter top */
      color-mix(in hsl, var(--base-color, #2973C1) 90%, white 10%) 0%,
      /* true base mid */
      var(--base-color, #2973C1) 50%,
      /* slightly darker bottom */
      color-mix(in hsl, var(--base-color, #2973C1) 85%, black 15%) 100%
    );
  }
}

How to use it:

SUPPORT TONYHERMAN.COM:

<header class="gradient-top-bottom" style="--base-color: #2973C1;">
  Cinematic header (blue)
</header>

<header class="gradient-top-bottom" style="--base-color: #435B7C;">
  Cinematic header (navy)
</header>

<header class="gradient-top-bottom" style="--base-color: #FFE5D0; color:#000;">
  Cinematic header (peach)
</header>

Single-direction version: simple dark-bottom gradient

If you just want the bottom to be darker without the lighter top, use this:

.gradient-bottom {
  /* 1) Always-works fallback */
  background-color: #2973C1;
  color: #fff;
  padding: 2rem;
}

/* 2) Widely compatible overlay fallback */
.gradient-bottom {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.16) 100%);
  background-repeat: no-repeat;
}

/* 3) Modern upgrade with color-mix */
@supports (color: var(--x)) and (color: color-mix(in hsl, black 50%, white 50%)) {
  .gradient-bottom {
    background: linear-gradient(
      to bottom,
      var(--base-color, #2973C1) 0%,
      color-mix(in hsl, var(--base-color, #2973C1) 85%, black 15%) 100%
    );
  }
}

Usage:

<header class="gradient-bottom" style="--base-color: #435B7C;">
  Dark-bottom header (navy)
</header>

<footer class="gradient-bottom" style="--base-color: #2973C1;">
  Dark-bottom footer (blue)
</footer>

Why this works

Fallback first: Older browsers show a flat color. Nothing breaks.
Overlay fallback: Adds depth even without color-mix().
HSL mixing: color-mix(in hsl,...) keeps hue and saturation stable while darkening or lightening.
One class, any color: Set --base-color inline or in your CSS and move on.

Common gotchas

Add padding or height or you will not see the gradient.
Avoid over 100% weights in color-mix(). Some engines reject it.
You can set text color per block. Light backgrounds may need color:#000;.
Remove default body margin if you want the header flush to the top.

Quick demo block

Copy this whole block into a blank page to verify the look. It includes the body reset.

<style>
  body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

  .gradient-top-bottom {
    background-color: #2973C1;
    color: #fff;
    padding: 2rem;
    font-size: 1.25rem;
  }
  .gradient-top-bottom {
    background-image:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0.08) 0%,
        rgba(255,255,255,0) 50%,
        rgba(0,0,0,0.18) 100%
      );
    background-repeat: no-repeat;
  }
  @supports (color: var(--x)) and (color: color-mix(in hsl, black 50%, white 50%)) {
    .gradient-top-bottom {
      background: linear-gradient(
        to bottom,
        color-mix(in hsl, var(--base-color, #2973C1) 90%, white 10%) 0%,
        var(--base-color, #2973C1) 50%,
        color-mix(in hsl, var(--base-color, #2973C1) 85%, black 15%) 100%
      );
    }
  }
</style>

<header class="gradient-top-bottom" style="--base-color:#2973C1;">
  Cinematic header (blue)
</header>

<header class="gradient-top-bottom" style="--base-color:#435B7C;">
  Cinematic header (navy)
</header>

<header class="gradient-top-bottom" style="--base-color:#FFE5D0;color:#000;">
  Cinematic header (peach)
</header>

Accessibility tip

Check contrast on your lightest area and your text color. If you use very light base colors, set the text to black and consider increasing the bottom darkening a bit.

Sample File Download

Here’s a sample file you can download and use. I always like thing fully coded – just to make sure I get it right. This is a straight download – no email or anything required.

Download HTML File

📄 Download a PDF of This Article