How to darken a background using CSS?

Setting background-blend-mode to darken would be the most direct and shortest way to achieve the purpose however you must set a background-color first for the blend mode to work.
This is also the best way if you need to manipulate the values in javascript later on.

body { background: #00000044 url('https://placecats.com/neo/300/200') no-repeat; background-blend-mode: darken; height: 100vh; /* for hover to work */ } body:hover { background-blend-mode: initial; }

Can I use for background-blend

When you want to brightness or darker of background-color, you can use this css code

.brighter-span { filter: brightness(150%); } .darker-span { filter: brightness(50%); } 

Use an :after psuedo-element:

.overlay { position: relative; transition: all 1s; } .overlay:after { content: '\A'; position: absolute; width: 100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.5); opacity: 1; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; } .overlay:hover:after { opacity: 0; } 

Check out my pen >

http://codepen.io/craigocurtis/pen/KzXYad

It might be possible to do this with box-shadow

however, I can't get it to actually apply to an image. Only on solid color backgrounds

body { background: #131418; color: #999; text-align: center; } .mycooldiv { width: 400px; height: 300px; margin: 2% auto; border-radius: 100%; } .red { background: red } .blue { background: blue } .yellow { background: yellow } .green { background: green } #darken { box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .7); /*darkness level control - change the alpha value for the color for darken/ligheter effect */ }

Red <div class="mycooldiv red"></div> Darkened Red <div class="mycooldiv red" id="darken"></div> Blue <div class="mycooldiv blue"></div> Darkened Blue <div class="mycooldiv blue" id="darken"></div> Yellow <div class="mycooldiv yellow"></div> Darkened Yellow <div class="mycooldiv yellow" id="darken"></div> Green <div class="mycooldiv green"></div> Darkened Green <div class="mycooldiv green" id="darken"></div>

You can use backdrop-filter: brightness(50%);

Warning:

• "Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent".

html, body { height: 100%; margin: 0; } body, .page-container, .image-container, .back-drop { display: flex; flex: 1 1; gap: 25px; } .page-container { padding: 20px; } /* Relevant Part */ .image-container { background-image: url('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg'); } /* Relevant Part */ .back-drop { backdrop-filter: brightness(50%); } .back-drop:after { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; content: 'this is a backdrop'; color: cyan; font-weight: bold; font-size: 28px; }

<div class="page-container"> <div class="image-container"> <div class="back-drop"> </div> </div> <div class="image-container"> </div> </div>

You can use a container for your background, placed as absolute and negative z-index : http://jsfiddle.net/2YW7g/

HTML

<div class="main"> <div class="bg"> </div> Hello World!!!! </div> 

CSS

.main{ width:400px; height:400px; position:relative; color:red; background-color:transparent; font-size:18px; } .main .bg{ position:absolute; width:400px; height:400px; background-image:url("http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png"); z-index:-1; } .main:hover .bg{ opacity:0.5; } 

Just to add to what's already here, use the following:

background: -moz-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)); background: -webkit-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)); background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)); filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=0 )"); 

...for cross-browser support of a 70% linear-gradient overlay. To brighten the image, you can change all those 0,0,0's into 255,255,255's. If 70% is a bit much, go ahead and change the .7. And, for future reference check out this: http://www.colorzilla.com/gradient-editor/

For me the filter/gradient approach didn't work (perhaps due to the existing CSS) so I have used :before pseudo styling trick instead:

.eventBannerContainer { position: relative; } .eventBannerContainer:before { background-color: black; height: 100%; width: 100%; content: ""; opacity: 0.5; position: absolute; display: block; } /* make any immediate child elements above our darkening mask */ .eventBannerContainer > * { position: relative; } 

Based on Alex Price's answer I made an scss mixin:

@function decToHex($dec) { $dec: round($dec); $hex: "0123456789ABCDEF"; $first: (($dec - $dec % 16)/16)+1; $second: ($dec % 16)+1; @return str-slice($hex, $first, $first) + str-slice($hex, $second, $second); } @mixin darken-bg ($darkAmount) { $filterHex: decToHex(255 * $darkAmount); background: -moz-linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount)); background: -webkit-linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount)); background: linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount)); filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='##{$filterHex}000000', endColorstr='##{$filterHex}000000',GradientType=0 )"); } /* usage */ .some-div { @include darken-bg(0.2); } 

decToHex based on Pierpaolo Cira answer

I tried using background-blend-mode for this:

 <div class="dark-background w-screen px-24" style=" background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fdevx.work%2Fblog%2Fwp-content%2Fuploads%2F2021%2F03%2FLOUNGE-01-1920x1024.jpg&f=1&nofb=1&ipt=bc89ea53d39a8da6df1ca59ed5daba3155d44fa3627e5071448aecd5da8be808&ipo=images'); background-color: gray; background-blend-mode: multiply; background-attachment: fixed; height:100vh; width:100vh; color:white; " >Here is a text !! :) </div>

This is the easiest way I found

 background: black; opacity: 0.5;