How to darken a background using CSS?

html

css-dark-mode

linear-gradient

box-shadow

byAlex Kataev·Aug 24, 2024

For an immediate solution, overlay a transparent black layer on your element's background using rgba(0, 0, 0, 0.5). Here's the necessary CSS:

/*.darken is your personal CSS sunglasses 😎 */
.darken::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); /* The darker you need the more you increase the value (0-1)*/
}
/*.darken would also need a spoonful of relative position for this to work */
.darken {
  position: relative;
}

The element with .darken should be set as position: relative; to contain the overlay. The opacity within rgba controls the darkness.

Technically dark modes

If rgba alone doesn't cut it for you, you can spice things up by using linear-gradient, background-blend-mode, filter, or pseudo-elements.

Darkening with linear-gradient

A layered background with linear-gradient allows us to easily darken background images.

/* CSI: CSS Scene Investigation
the first layer is your sunglass filter and the second is your image 
*/
.dark-image {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('your-image.jpg');
}
/* Adjust the rgba values for different tones of grey... or any color. Mind-blown 💥 */

Blend and filter effects

The background-blend-mode property offers ways of blending your background-color and image for different effects. filter: brightness(50%) leans into the image's brightness and turns it down a notch. These techniques are like your computer-based photo editing software.

/* Warning: putting on sunglasses before operating this CSS might not be necessary */
.blend-darken {
  background-color: black;
  background-blend-mode: darken; /* Not to be mistaken for coffee blend ☕️ */
}

.filter-darken {
  filter: brightness(50%); /* No batteries needed. */
}

Ensure you cross-verify the cross-browser compatibility for these properties on caniuse.com.

Pseudo-elements as dark overlords

A ::after can provide a dark overlay elegantly. With absolute positioning, this feature stretches to cover the whole element like a wormhole covers...worms? It's fluid as butter thanks to transitions.

/* Just like the agents in The Matrix, ::after needs to be positioned absolutely */
.overlay::after {
  content: '';
  background: rgba(0, 0, 0, 0.5); /* Ready, steady, Schwarz. */
  ... /* other positioning and styling */
}

box-shadow armed with inset and RGBA. Sounds like a Marvel superhero, right? It's actually an inner shadow that darkens the element from the edges.

Exploring Uncharted Darkness

If these methods are too vanilla for you, let's go extreme. Add transparent gradients, inset shadows, and hover effects to your arsenal.

Transparent gradient darkening.

The linear-gradient property amplifies the visual depth of your shadow. Look ma, we’re making art!

/* Serving up a tequila gradient sunrise */
.gradient-darken {
  background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, transparent 100%),
    url('your-image.jpg');
}

Darken from the edges

By setting box-shadow with inset, poof! You create a vignette effect. It darkens the edges and simultaneously brightens the center.

/* Adding a pinch of gothic */
.inset-shadow {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

Hover-Darkening

For a dramatic entrance, use transition properties and darken your element on hover.

/* Presentation is everything */
.hover-darken:hover::after {
  background: rgba(0, 0, 0, 0.7);
  transition: background-color 0.3s ease; /* Smooth as silk */
}