I'm trying to create a light effect with CSS and HTML only. Just like this image
I don't know if it's possible. or how to do it.
Any help will be appreciated.
.circle {
border: 10px solid;
border-radius: 50%;
width: 200px;
height: 200px;
background-color: green;
}
<div class="circle"></div>
How To Create a CSS Glow Effect. The CSS glowing text can be created by using the text-shadow property. This property allows you to add different shadows to your text. You can also place your text in an element and then apply the shadow effect to it by using the box-shadow property with some animations.
The key is to use the box-shadow property of CSS to glow the image when user put cursor on image.
Create HTMLCreate an <h1> tag with a class "glow". Write a text in the tag.
If we make an element round with border-radius: 50% , then box-shadow will follow suit. We can stack multiple glow effects on an element by giving box-shadow multiple sets of values, separated by commas. The glow effects will be stacked with first on top, last on bottom.
Here is my example
*,
*:before,
*:after {
box-sizing: border-box;
}
div {
width: 120px;
height: 120px;
border-radius: 60px;
background: linear-gradient(to bottom, #393939 0%, #151515 100%);
position: relative;
}
div:before {
content: '';
width: 106px;
height: 106px;
border-radius: 53px;
background: #19f000;
border: 1px solid black;
position: absolute;
left: 7px;
top: 7px;
}
div:after {
content: '';
width: 80px;
height: 60px;
border-radius: 50%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
position: absolute;
transform: rotate(-18deg);
left: 13px;
top: 9px;
}
<div></div>
JSfiddle Demo
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