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:
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>
The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
The key is to use the box-shadow property of CSS to glow the image when user put cursor on image.
Using transforms on the box-shadow (& transform ) property, we can create the illusion of an element moving closer or further away from the user.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With