Create a glossy light effect using CSS
Solution 1
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>
Solution 2
You can use a second div
for the highlight to try and provide a stronger 3D effect, freeing up the box-shadow
to be used for the darker contouring on the edges.
.circle {
width: 164px;
height: 164px;
background-color: #19f000;
border-radius: 100%;
position: relative;
border: 10px solid #444444;
box-shadow: 0 0 15px 0 rgba(0,0,0,.8) inset;
transform: rotate(-20deg);
}
.highlight {
position: absolute;
top: 2px;
right: 0;
left: 0;
margin: auto;
width: 80%;
height: 64%;
opacity: .92;
border-radius: 100%;
/* gratuitous gradient compatibility - activate! */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}
<div class="circle">
<div class="highlight"></div>
</div>
Solution 3
You can do with the combination of radial gradient
and a pseudo element for glossy effect.
- The transition from white to green can be produced through radial-gradient. The #fff color stops at 5%.
- The glossy effect finish is given using the
opacity
on the pseudo element and has a similar shape of the parent with white background and reduced width.
.circle::after {
background: white none repeat scroll 0 0;
border-radius: 50%;
content: " ";
display: block;
height: 100px;
opacity: 0.15;
position: absolute;
width: 150px;
left: 20px;
}
.circle {
background-image: radial-gradient(ellipse at 50px 10px , #ffffff 0%, #fff 5%, #00ff00 100%);
border: 10px solid;
border-radius: 50%;
height: 200px;
position: relative;
width: 200px;
}
<div class="circle">
</div>
Solution 4
You can do it using a single element also by layering one radial-gradient
image of the required size on top of an angled linear-gradient
image and then positioning it appropriately. Multiple background images and layering has very good browser support (IE9+) but gradients are supported only in IE10+.
.circle {
border: 10px solid;
border-radius: 50%;
width: 200px;
height: 200px;
background: radial-gradient(ellipse at 90px 45px, rgba(255, 255, 255, 0.75) 10%, rgba(255,255,255,0.5) 30%, rgba(255,255,255,0) 32%, rgba(25,240,0,1) 45%), linear-gradient(160deg, transparent 12%, rgb(25, 240, 0) 30%);
background-size: 125% 80%, 100% 100%;
background-repeat: no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="circle"></div>
Browser Compatibility Charts:
Solution 5
<!doctype html>
<html>
<head>
<style>
.circle {
border:10px solid;
border-radius: 50%;
width: 200px;
height: 200px;
background: rgb(25,240,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(25,240,0,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(25,240,0,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to top, rgba(25,240,0,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19f000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
</style>
<head>
<body>
<div class="circle">
</div>
</body>
</html>
Please use background gradient color as mentioned above. i hope this woould helpful to you
here is the working demo.Demo
Alvaro Silvino
I'm a fullstack developer, passionate about my profession and wishing to contribute to a better world through technology. Undergraduate in CS by Federal University of Pernambuco and Memorial University of Newfoundland. Degree in deep learnig from Coursera. Currently working for Booking.com, as Software Engineer and aspiring to Machine Learning Data Scientist. contact: [email protected]
Updated on July 08, 2022Comments
-
Alvaro Silvino almost 2 years
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>