CODEWITHSUNDEEP
css
Blackbam
Blackbam

Reputation: 19376

How to achieve very slight text shadows in CSS?

property in CSS is a good way to have shadows for dynamic text in HTML. However the browsers (especially safari, firefox) render a quite strong shadow with quite low settings:

text-shadow:1px 1px 2px #000; // still quite strong
text-shadow:1px 1px 2px #000; // still quite strong
text-shadow:0.01em 0.01em 0.01em #000; // some browsers do not even display this

How can I achieve cross browsers-compatible text shadows which are still not as strong as the first two given text shadows, but still displayed? Is there a solution for this problem?

Upvotes: 1

Views: 1721

Answers (2)

Oriol
Oriol

Reputation: 288120

You could try semi-transparent text-shadow:

text-shadow:1px 1px 2px rgba(0,0,0,0.25);

Demo

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

Try using a "weaker" colour:

text-shadow: 1px 1px 2px rgba(0,0,0, 0.25);

Adjust that 0.25 as needed - a value of 0 will be invisible, and 1 will be the same as the #000 you're currently using.

Upvotes: 4

Related Questions