Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Create a glossy light effect using CSS

I'm trying to create a light effect with CSS and HTML only. Just like this image
enter image description here

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>
like image 362
Alvaro Joao Avatar asked Oct 27 '15 04:10

Alvaro Joao


People also ask

How do you make a glow effect in CSS?

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.

How do you add a glowing effect to an image in CSS?

The key is to use the box-shadow property of CSS to glow the image when user put cursor on image.

How do you make a glow effect in HTML?

Create HTMLCreate an <h1> tag with a class "glow". Write a text in the tag.

How do you make a box glow in CSS?

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.


1 Answers

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

like image 121
Ilya B. Avatar answered Sep 25 '22 13:09

Ilya B.