Dynamically change color to lighter or darker by percentage CSS
All modern browsers have had 100% filter
support since January 2020. Even UC Browser for Android (instead of Chrome, on the $80 phones) supports it.
a {
/* a nice, modern blue for links */
color: #118bee;
}
a:active {
/* Darken on click by 15% (down to 85%) */
filter: brightness(0.85);
}
Additionally, you can control this dynamically with CSS variables, which have been supported by most browsers since October 2017 (excluding QQ):
:root {
--color: #118bee;
--hover-brightness: 1.2;
}
a {
color: var(--color);
}
a:active {
/* Darken on click */
filter: brightness(var(--hover-brightness));
}
Not my project, but one that's great to look at for a real-world example of how great modern CSS can be, check out: MVP.css
Original Answer
If you're using a stack which lets you use Sass or Less, you can use the lighten
function:
$linkcolour: #0000FF;
a {
color: $linkcolour;
}
a.lighter {
color: lighten($linkcolour, 50%);
}
There's also darken
which does the same, but in the opposite direction.
How to darken a background using CSS?
Just add this code to your image css
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);
}
CSS Darken on Hover without Changing Text Color
Instead of using filter: Brightness(), I prefer to use filter: Saturate().
It gives object darken background but doesn't affect your text.
.badge {
display: inline-block;
padding: 0.35em 0.65em;
font-size: 0.75em;
font-weight: 700;
line-height: 1;
color: white;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25rem;
text-decoration: none;
}
/* .badge:hover {filter: brightness(0.8);} */
.badge:hover {filter: saturate(0.5);}
.badge > span {color: white;}
<a href="#" class="badge" style="background-color: #0072CE;"><span>Some Text</span></a>
Darken CSS background image?
You can use the CSS3 Linear Gradient property along with your background-image like this:
#landing-wrapper {
display:table;
width:100%;
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('landingpagepic.jpg');
background-position:center top;
height:350px;
}
Here's a demo:
#landing-wrapper { display: table; width: 100%; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/350x150'); background-position: center top; height: 350px; color: white;}
<div id="landing-wrapper">Lorem ipsum dolor ismet.</div>
CSS background image make darker
I would go for photoshop to blur the background or give it an overlay. However you can try giving it a linear gradient on your top-container
class before the url call on the background-image as so:
background: linear-gradient( rgba(0,0,0,0.5), rgba(0, 0, 0, 0.5) ),url(../images/background1.jpg) no-repeat center center fixed;
just change the rgba value to what you need. Hope this helps.
How to darken a CSS background image?
#home {
background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This should work
Related Topics
Link a .CSS File in Another Folder
Multiple Spaces Between Words in HTML Without &Nbsp;
How to Make an Element's Background-Color a Little Darker Using CSS
How to Put an Input Element on the Same Line as Its Label
How to Show Split Header in the Material Table Having Nested Group of Data in Angular
How to Make Div Occupy Remaining Height
Make Div's Height Expand with Its Content
Border Style Do Not Work with Sticky Position Element
How to Position a Div Scrollbar on the Left Hand Side
Inline <Style> Tags VS. Inline CSS Properties
Align Labels in Form Next to Input
What Is the Performance Impact of the Universal Selector