5

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>

3
  • 1
    Show what you have tried, make a snippet. Commented May 4, 2019 at 11:55
  • I add link to codepen
    – Lottek
    Commented May 4, 2019 at 12:15
  • master is here !! XD :D Commented May 4, 2019 at 12:23

1 Answer 1

4

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>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.