cup_of cup_of - 1 month ago 16
HTML Question

Text outer glow effect using CSS

I need to add an "outer glow" Photoshop effect to some text using CSS. Here is a screenshot of the mockup of what I am trying to acheive:

enter image description here

Here is the Photoshop layer settings:

enter image description here

I'm pretty sure this is

text-shadow
but I've been messing around with it and I cannot achieve a glow on all sides.

Answer

Text-shadow is what you have to use to achieve glow or some kind of text-shadow.

p{
text-shadow : horizontal-shadow vertical-shadow blur color;
}

To add multiple text-shadow, you can do that by separating them, by adding comma to text-shadow property.

p{
    text-shadow : horizontal-shadow vertical-shadow blur color, horizontal-shadow vertical-shadow blur color;
 }

p{
  background:#111;
  color:#fff;
  text-shadow:1px 1px 10px #fff, 1px 1px 10px #ccc;
  font-size:48px;
  text-align:center;
}
<p>
Demo Text
</p>

Comments