Text is blurry on my theme

The header texts are all blurry, hard to read on my theme, don’t know how can I make it normal.unclear%20text
You can see that bookmarks and the titles are effected.

Any help is much appreciated!

1 Like

A drop shadow is automatically added to text and is dependent on the background color chosen. For instance, a light color background will produce a light drop shadow because the system will assume you will choose a dark text and vise versa.

Based on your print screen of the text I’m assuming that the black background is an added picture? So I’d recommend changing the Header area background color to match the black. It will then produce a dark drop shadow which you then shouldn’t see, making the text clear.

If interested, Firefox Color doesn’t produce a drop shadow. So when you export a theme you’ve created from there, you won’t have any drop shadows on your text once uploaded to Mozilla.

Thank you for your answer, and yes the black background is from the picture(3000x200 px).
Tried to use black or that red for the Header area background, but still no luck, don’t know what I am doing wrong.
Also here you can check the theme out:click

I would try using a color that matches the a lighter part of the hand perhaps because it is lighter. The darker text colors always have that shadow/ blur effect. That is the easiest way for you to make the text more readable.

If it’s not too much trouble can you post a new print screen of the color input fields? I’m really curious as to why my suggestion didn’t work. It used to work but then again, things have changed.

Here it is:

Can I get you to change the Header area background color to a solid black, rbga(0, 0, 0, 1)? I’d like to see if that makes a difference.

Just did it and nothing have changed.

I noticed that. :frowning:

That’s really odd, but as I said, maybe something changed. Perhaps the drop shadow color is related to the text color instead. Your text color is a fairly dark red.

My best advice for now would be to set the theme up using Firefox Color instead. You won’t have any drop shadow on it that way.


I know it’s been awhile but I ran across one of my own themes which was producing the same problem as yours. I made changes to the background color a couple times, going from light to dark with no change occurring with the text shadow. What fixed the issue in that case was when I changed the Toolbar area background color. But let me explain that further. The theme I’m referring to was online before they switched to lightweight themes and at that time we didn’t have the option of changing the Toolbar area background color, among other things. So I went to edit the theme to make some changes. The Toolbar area background color went from a partially transparent white to a lower transparency brown that went with the colors within the theme.

Now I know that based on the printscreens you provided, your Toolbar area background color is set to black with zero transparency. So I figured that couldn’t be the issue with yours. So what I did was create a theme with a black background color and then set all my color options to exactly what you have/had yours set as and then edited each option one at a time until the text was no longer blurry because of the drop shadow. This is the theme that I created. The ONLY way I was able to get that drop shadow issue resolved was by making both my Header area text and icons as well as the Toolbar area text and icons colors lighter. So unfortunately it looks as if there is no way of fixing your issue without changing your text colors and making them lighter. But again, if interested, Firefox Color doesn’t currently have the option to incorporate drop shadows on text. So if you were to use it to set your color preferences and such, it would fix the problem. And if you do decide to try Firefox Color and run into any problems, I’m sure someone here (myself included) would be happy to help.


Tried to change them, still no luck and I don’t want to use Firefox Color.
But thank you anyway. :slight_smile:

Your text still looks dark and that’s the problem. The only way I was able to fix the one I uploaded was to lighten the text.

And that’s fine if you don’t want to use Firefox Color. It was just a suggestion.

Just wanted to say thanks for suggesting Firefox Colors, I was going insane trying to fix the blurry font and your solution saved me a lot of headaches.

1 Like

I’m glad that it helped!

1 Like