Как на CSS сделать светящийся круг с радиальным размытием?

Question

[Григорий Васильков]

Подскажите, как сделать круг с радиальным размытием?
Вот например в фотошопе можно поставить точку в 1 пиксел и вокруг нее сделать с помощью инструмента "обводка - градиент(из центра)" или "тень" любого размера размытый по радиусу круг.

В хтмл свойство box-shadow отталкивается от размеров элемента, то есть если элемент 0 на 0, то не совсем понятно, как сделать, чтобы элемент круглый при наведении из центра заполнялся цветом, который к краям круга тусклеет.

Спасибо

Answer 1

[Олег]

https://jsfiddle.net/joomla/uhqsar9b/

Comments

[Григорий Васильков]

Спасибо, тоже супер!

Answer 2

[Григорий Васильков]

...нашел.

.class:after {
  content: "";
  position: absolute;
  display: block;
  top: 25%;
  left: 25%;
  right: 25%;
  bottom: 25%;
  opacity: 0;
  z-index: -1;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -webkit-box-shadow: 0 0 0 transparent;
  -moz-box-shadow: 0 0 0 transparent;
  -ms-box-shadow: 0 0 0 transparent;
  -o-box-shadow: 0 0 0 transparent;
  box-shadow: 0 0 0 transparent;
  -webkit-background: radial-gradient(#36bef9, transparent);
  -moz-background: radial-gradient(#36bef9, transparent);
  -ms-background: radial-gradient(#36bef9, transparent);
  -o-background: radial-gradient(#36bef9, transparent);
  background: radial-gradient(#36bef9, transparent);
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  -ms-transition: all 0.25s;
  -o-transition: all 0.25s;
  transition: all 0.25s;
}
.class:hover:after {
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  opacity: 1;
}

Answer 3

[xmoonlight]

Шел мимо, думаю дай-ка дам затравки: frontender.info/balls )
Вот что вышло: линк