CODEWITHSUNDEEP
csscss-filters
user519477
user519477

Reputation:

CSS brightnesss filter blurs text

Using filter: brightness(x) on an element leads to the text inside being blurred under Chrome and Firefox. Is this desired behavior? If not, can this be fixed? Here's a fiddle demonstrating the issue:

https://jsfiddle.net/dye2n0xv/

button {
  border: none;
  background: linear-gradient(#53a423, #2f6c04);
  color: #fff;
  font-weight: bold;
  padding: 10px;
}

button:hover {
  filter: brightness(100%);
}
<button>
Some button label
</button>

Just hover the mouse over the button and pay attention to the text. Of course, the example with 100% is stupid, in my use-case I need something like 125%, but I wanted to make sure it's not the browser trying to display a whiter white than white, that's why I went with 100% which should theoretically not alter the element at all.

Upvotes: 7

Views: 3604

Answers (3)

Majali
Majali

Reputation: 531

It’s normal because when you apply a CSS filter on an element, all its children will be affected.

What you need to do is to separate the text from the background, and make the filter only on the background.

this is an example

<button>
<span class="background"></span>
<span class="text">Some button label</span>
</button>

and CSS

button {
border: none;
background:none;
}

.text {
border: none;
color: #fff;
font-weight: bold;
padding: 10px;
z-index:1;
position:absolute;
}

.background:hover {
filter: brightness(125%);
}

.background {
width:140px;
height:40px;
background: linear-gradient(#53a423, #2f6c04);  
z-index:0;
position:absolute;
}

Note: you will need a javascript function to make the filter work on hover over text because of z-index

Upvotes: 1

c-smile
c-smile

Reputation: 27460

This is by nature of filters and the way how they are specified in CSS.

Normally text (on Windows for example) gets rendered using ClearType. Clear type requires non-transparent background. ClearType uses sub-pixel antialising so you see the text more clear cut. In ClearType each addressable pixel renders de facto three "dots".

When you apply filter, the engine is forced to create a bitmap for the element, render content on it, apply filter to its pixels and render final bitmap as a whole. Text gets rendered on such bitmap with gray scale antialiasing. That method does not use sub-pixel AA so you see the text more blurry.

More here: https://en.wikipedia.org/wiki/ClearType

If you think a bit on illustrations there then you will understand why ClearType cannot be used with [color] filters applied.

Upvotes: 4

AlgoRythm
AlgoRythm

Reputation: 168

Seeing as this is quite simple code, I am assuming this is normal behavior, and no error of yours. If you do not want this effect, the easiest thing to do is simply change the background of the button to a lighter color on hover. I'm sure it has something to do with the filter rendering system that makes the text blurry, probably because brightness might take the button as an image, and ignore that the text inside of the button is text, and treat it as just basic color values, shifting them around and thus, blurring them

Upvotes: 0

Related Questions