Radial box-shadow on element

Question

Is there a way to create a box-shadow that radiates in a circle from a rectangular div element? So like a regular shadow, except rounded.

Pasquil

Answer 1

Strictly speaking - no. The box-shadow is tied to the shape of the object it's assigned to.

That said - assuming your code allows for nested div elements - you can effectively do this by styling a wrapping div as a circle with a drop-shadow, and the inner content div with the rectangular element.

.wrapper {
  /* Equal width and height create a perfect square */
  width: 300px;
  height: 300px;
  /* Adding a border-radius of 1/2 width or height (same value) */
  /* turns that square into a circle */
  border-radius: 150px;
  /* Apply your box-shadow styles, which inherit the round .wrapper shape */
  box-shadow: 0px 0px 200px #444444;
}

.content {
  /* Apply .content styles as needed; */
  /* will display on top of the round shadow */
  background-color: yellow;
}

<div class="wrapper">
  <div class="content">Content Here</div>
</div>

Cauvery