CODEWITHSUNDEEP
htmlcssweb
Kyle Bashour
Kyle Bashour

Reputation: 1366

Darken Behind Text in CSS Without Shadow?

I'm trying to darken the area behind my text because it makes it mare legible in some places (I just need this in my hero). Right now I'm using multiple shadows with a lot of blur (see below) but this makes the gradient rather rough, and isn't the smooth, "glossier" look I'm going for.

Here's an image of what it does:

Problematic shadowing

But what I actually want is something more like the shadow here:

Good shadowing

Is there a way to make an object or something that surrounds the text or is the shape of the text?

Thanks! And here's what I'm using now: 

text-shadow: 0px 0px 80px rgba(0,0,0,1),
             0px 0px 70px rgba(0,0,0,1),
             0px 0px 60px rgba(0,0,0,1),
             0px 0px 50px rgba(0,0,0,1),
             0px 0px 40px rgba(0,0,0,1),
             0px 0px 30px rgba(0,0,0,1);

Upvotes: 0

Views: 2169

Answers (1)

Guffa
Guffa

Reputation: 700362

You can use a single shadow with much smaller radius and a semi-transparent color. That gives a shadow closer to the characters, that is mostly only seen on the lighter part of the background, and that's where it is needed to make the text distringuishable from the background.

Example:

text-shadow: 0 0 10px rgba(0,0,0,0.4);

Demo: http://jsfiddle.net/XFhJa/

Upvotes: 2

Related Questions