Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Text outer glow effect using CSS

Tags:

html

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.

like image 425
cup_of Avatar asked Nov 03 '16 03:11

cup_of


People also ask

How do you add outer glow to text in CSS?

Text-shadow is what you have to use to achieve glow or some kind of text-shadow. To add multiple text-shadow , you can do that by separating them, by adding comma to text-shadow property.

How do you make a font glow in CSS?

The CSS glowing text can be created by using the text-shadow property. This property allows you to add different shadows to your text. You can also place your text in an element and then apply the shadow effect to it by using the box-shadow property with some animations.


1 Answers

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>
like image 78
frnt Avatar answered Sep 27 '22 18:09

frnt