How to make an empty div or container glow with pure CSS?


Tags: css,glow,box-shadow

Problem :

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



Solution :

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>


    CSS Howto..

    How do you make HTML elements appear on a vertical line using CSS?

    how to dynamically move list items inside a DIV to get proper arrangement?

    How to use relative/absolute paths in css URLs?

    How to get all child elements using an xpath selector?

    How are multiple spaces showing in HTML, without pre, nbsp or white-space: pre?

    Can someone show me how to get my CSS code to work more than once? [closed]

    css for mobile devices how to make '@media all' work on wordpress child theme

    How to share js/css/images across Rails applications?

    How to force a button inside a div not to inherit the parent CSS?

    How to make my a scalable website with auto:height and overflow:auto

    Android stock browser: How to prevent double tap closing browser

    How to define cellspacing in CSS

    CSS : how to center a input inside a div

    How to make hover dynamic in CSS?

    how to link css files in organization github pages

    How to develop a webpage with Bootstrap [closed]

    How to style QTableView CSS

    How to prevent a p:menubar from being overlapped by the contents of a CSS template?

    Cutting out the middle portion of an image (example shown)?

    how to put links in one line [CSS]

    How to conditionally add css properties in jquery (coffeescript)

    jQuery hide/show issue with offset

    How do I conclude the right directory path when including in CSS/JS/HTML?

    python how to parse css file as key value [closed]

    how to align divs with different width within another parent div?

    How to overlay shadow with bootstrap?

    How do I refresh the qtip label to display new label for specific button on hover?

    How to override CSS code with a new class?

    How do I add transition to the effect of hide() and show() on these elements?

    Boostrap 3: how to force the content of layout columns to be of same height?