How to increase the thickness of a text-shadow

Asked

Viewed 213 times

4

It is possible to increase the thickness of a text-shadow ?

Look at that one EXAMPLE in Jsfiddle

Simply, it’s like I haven’t put one text-shadow, becomes invisible.

css

1 answer

5


Two suggestions to solve the problem:

  • Use a better contrast. The white shadow diffuses in the blue behind and is not very noticeable;

  • Use multiple shadows. The shadows via CSS for text are really small, and when you increase the softening radius, they get so tenuous that it gets harder and harder to see them. Fortunately the shadow syntax allows multiple shadows per element, simply separating the shadows by commas.

Try using:

text-shadow: 0 0 30px #FFF, 0 0 30px #FFF, 0 0 30px #FFF, 0 0 30px #FFF, 0 0 30px #FFF, 0 0 30px #FFF, 0 0 30px #FFF;

On your Fiddle. You can also vary the offsets of each shadow to get interesting effects ;)

  • I’m going to test it now.

  • When several shadows are used it is unsolved, blurred. See: http://jsfiddle.net/AlexandreBR/Q8dX9/2/

  • 1

    By adjusting the offsets you can improve the effect. Look: http://jsfiddle.net/Q8dX9/3/ To achieve a more artistic effect, you can also combine colors close to each other.

  • I adjusted it and it was perfect! I used text-shadow: 0 0 15px #FFF, 0 0 30px #FFF, 0 0 40px #FFF, 0 0 40px #FFF, 0 0 50px #FFF; I keep increasing the pixels, type 10, 20, 30. So it disappears smoothly! See: http://jsfiddle.net/AlexandreBR/Q8dX9/4/

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.