Как в CSS сделать эффект освещения?

Question

[Леонид]

Есть вот такой вот блок на сайте и нужно реализовать эдакий эффект освещения некоторой области:

без освещения ( для сравнения )


p.s.: это вырезка из psd-макета, соотв. линии - показывают границы контента в дизайне

Answer 1

[lexchz]

radial-gradient
box-shadow

Comments

[Леонид]

Спасибо!
Обошелся таким решением:

background-image: radial-gradient(circle closest-corner at 67% 10%, #205368, #232a2d);

Answer 2

[Леонид]

Да, кажется я уже понял:
<div class="wrap-right"><div class="shadow"></div>

.power .shadow {
	display: block;
	position: absolute;
	height: 1px;
	width: 1px;
	-webkit-box-shadow: 0px 4px 100px 0px rgba(255, 255, 255, 0.2);
	-moz-box-shadow: 0px 4px 100px 0px rgba(255, 255, 255, 0.2);
	box-shadow: 0px 4px 100px 0px rgba(255, 255, 255, 0.2);
}

Comments

[Alex Karo]

1) У box-shadow достаточно хорошая поддержка, чтобы использовать его без префиксов https://caniuse.com/?search=box-shadow
2) Если есть автоматизация сборки - можно переложить добавление префиксов на нее https://github.com/postcss/autoprefixer

[Ankhena]

Только вместо вот этой "порнушки"

.power-share .block_image_right_bg .wrap-right .shadow

.wrap-right::after
И не забыть добавить свойство content.

Префиксы для box-shadow вообще не нужны.

[Леонид]

Ankhena, сделал проще:

background-image: radial-gradient(circle closest-corner at 67% 10%, #205368, #232a2d);

[Ankhena]

Леонид, да главное без лишних div