If you're looking to add a subtle, shadowy effect to text without any offset, you can achieve this by utilizing the CSS property text-shadow
. Simply include the following style in your CSS:
{text-shadow:0 0 2px #888;}
For your specific case, you can apply the style directly to your text like so:
<div style='font-size: 24px;
weight: 600;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-shadow:0 0 2px #888;'>
</div>
> Check out this live example on Fiddle.
More information on the text-shadow
property can be found at w3schools.com. This property takes four parameters:
h-shadow
: The position of the horizontal shadow. Negative values are allowed.
v-shadow
: The position of the vertical shadow. Negative values are allowed.
blur
: The blur distance (optional).
color
: The color of the shadow (optional).
Please note that the text-shadow
property is not supported in Internet Explorer versions prior to IE10.
For IE browsers, you can consider using a blurring filter on the text:
filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=1);
Alternatively, you can apply a glowing filter:
filter:progid:DXImageTransform.Microsoft.Glow(Color=gray,Strength=1);
Or combine both filters:
filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=1)
progid:DXImageTransform.Microsoft.Glow(Color=gray,Strength=1);
Refer to http://msdn.microsoft.com for more information on IE static filters.