0

I want an empty container to glow so I use this code:

box-shadow: 0 1px 20px 1px lightcyan;

The problem with this is that only the borders glow and there is a big hole in the center which is not the effect I want. I know I can move the position of the shadow so is not overlapped by the container itself but I don't want that because it would be out of place.

Is there any other alternative to achieve this effect with pure CSS?

Something like this, but without the background:

enter image description here

4castle
  • 32,613
  • 11
  • 69
  • 106
Cain Nuke
  • 2,843
  • 5
  • 42
  • 65
  • Can you show what the desired effect would be like? A picture would be helpful, because your description doesn't really describe what you want, only what you don't want. – 4castle Jul 18 '16 at 05:03
  • Something like this but without the background https://clojurefun.files.wordpress.com/2012/10/2012-10-04-moon-glow.png – Cain Nuke Jul 18 '16 at 05:05

1 Answers1

3

box-shadow can do it, just crank up the blur and the spread (the 3rd and 4th parameters).

For a circle, add border-radius: 50%; and give a small width and height.

div {
  margin: 100px;
  width: 1px;
  height: 1px;
  background-color: lime; /* for the 1px in the center */
  border-radius: 50%;
  box-shadow: 0 0 50px 70px lime;
}
<div></div>
4castle
  • 32,613
  • 11
  • 69
  • 106