Как сделать такой эффект?

Question

[NQUAREx]

Как сделать такую тень вокруг div?

Comments

[Сергей delphinpro]

самый обычный box-shadow
Почему не получилось?

[NQUAREx]

Надо чтоб по центру было прозрачно

[NQUAREx]

Сергей delphinpro, Вот типа так, но во первых переход слишком резкий а во вторых линия какая то между внешней и внутренней тенью

#fv {
	position: absolute;
	overflow: hidden;
	border-radius: 50%;
	background-color: #00000000;
	transition: 1.5s;

	height: 100px;
	width: 100px;
	box-shadow: 0px 0px 50px 1000px #000, 0px 0px 50px 20px #000 inset;
	border: none;
}

[Ankhena]

NQUAREx, css.yoksel.ru/radial-gradients

[NQUAREx]

Ankhena, Хмм, кстаати, не подумал про них даже. Спасиб. Но я уже сделал по другому, Это эффект слепоты в игре, Я сделал не круг вокруг игрока, а просто затемнение с краев экрана к игроку

[NQUAREx]

Ну, коммерческая тайна, но кому интересно))

Answer 1

[Сергей Кутузов]

Здесь явно две тени - наружная и внутренняя. Чтоб развернуть box-shadow внутрь, в значение вводится inset, т.е. box-shadow: inset и далее как обычно. Чтоб тени были непрерывными по всему кругу, указывается два значения с противоположными знаками. Значения через запятую.

Comments

[NQUAREx]

Именно так я и делал, но между наружней и внутренней тенью по границе блока есть какая то линия, прям в 1 пиксель, border: none делает ее тоньше но не убирает полностью

Answer 2

[Николай Угольников]

div {
  width: 1px;
  height: 1px;
  border-radius: 50%;
  box-shadow: 0 0 55px 100px rgba(255, 255, 255, 0.97);
}

Comments

[NQUAREx]

А чем это отличается от моего кода? Если я спрашиваю значит мой код делает не то что надо, я точно также пришел к этому, логично потому что, но увы