-3

I've tried everything related to filter and backdrop-filter, but nothing seems to work. I've searched online but not found a single article addressing this (which is odd).

I simply want to set the background-color to be slightly darker than the current color, without knowing the color in advanced. That is, I do not want to "hardcode" a specific color to change to, but want it to be dynamically determined from the original background-color.

I can almost swear that I had this working at one point, too, but something made me stop using it. Probably some glitch or bug or something which didn't make it work as expected.

For example (this is not working code):

table tr { background-color: #FFF; } table tr:hover { background-color: "original but 25% darker, meaning kind of greyish in this particular case"; }

I suspect that the reason that filter didn't work was that it made the entire object brighter/darker -- not just the background color. backdrop-filter appears to have no effect whatsoever on my end.

Improve this question
5
  • Darker is always relative to some other color. If you don't know the original color then I don't see how you can make it darker. Commented Nov 16, 2020 at 1:28
  • @DanWilson The idea is obviously that CSS takes whatever background-color is currently in use and bases the darkness on that. I thought that was crystal clear... Commented Nov 16, 2020 at 1:37
  • Could be something with faking the background with a pseudo element before and using a CSS filter, could be a backdrop filter. Commented Nov 16, 2020 at 2:23
  • @Theraot Hmm? What do you mean? Commented Nov 16, 2020 at 2:44
  • You can now use color-mix Commented Oct 28, 2023 at 20:59

1 Answer 1

Reset to default
1

You can do this with a transparent background say 60% alpha black and two nested elements.

Set the colour to the parent element background and the transparent black on the child background when the hover occurs.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.