Search code examples
cssborderglow

Glowing box effect with shadow


I have a problem with styling box. I need to create a glow effect with shadow at the bottom box. I'm stuck while creating this effect.

Glow effect what I need to create:

enter image description here

I tried to create this effect, but it looks very bad

Link to codepen

html,
body {
  width: 100%;
  height: 100%;
  margin:0;
}

.container {
  background-color: black;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items:center;
}

.glow {
  width: 60%;
  height: 0px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 20px 0px yellow, 0 0 20px 10px #ffc600, 0px 0px 20px 0px yellow;
}
<div class="container">
  <div class="glow"></div>
</div>


Solution

  • You can approximate this using background coloration and some filter

    .glow {
      height:40px;
      margin:50px;
      background:
        radial-gradient(190px 20px,white, gold 15%,transparent 30%),
        linear-gradient(to right,transparent, gold,transparent) center/100% 5px no-repeat;
      border-radius:100%;
      position:relative;
      filter:blur(1px);
    }
    .glow:before {
      content:"";
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:inherit;
      filter:blur(7px);
    }
    
    body {
     background:#000;
    }
    <div class="glow"></div>