body { background: url("/backgrounds/city.jpg") center/cover no-repeat; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/backgrounds/city.jpg") center/cover no-repeat; }.button { color: #ff0000; } /* note: 100% is baseline so 85% is slightly darker, 20% would be significantly darker */ .button:hover { filter: brightness(85%); }body{ background: /* top, transparent black, faked with gradient */ linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), /* bottom, image */ url(https://images.unsplash.com/photo-1614030424754-24d0eebd46b2); } Run code snippetfilter: brightness(85%); > 100% = baseline > 85% = slightly darker > 29% = significantly darkerbody { background-color: #222; color: #fff; }body { display: grid; place-items: center; height: 100vh; } div { width: 50vw; height: 50vh; background: linear-gradient(to bottom right, #55566a, #282834); border-radius: 10px; }