Как сделать фон страницы в клеточку и с прозрачностью этого фона форме овала?

Question

[weranda]

Приветствую.

Есть паттерн — клетка. Не могу понять какие стили надо применить к этому паттерну, чтобы у этого паттерна при приближении к краям окна браузера был переход в прозрачность по форме овала.

Вот пример:


Подскажите, как такое реализовать?

Comments

[ambisinister One]

weranda, Там что на картинке? Типа, догадайтесь сами?
)

[weranda]

ambisinister One, На изображении сетка/паттерн. Если вы не видите, наверное, что-то монитор у вас такой. Для таких случаев вот вам та же сетка, только другим цветом:

[Ankhena]

Даже интересно, что ответ такой же, как в предыдущем вопросе: radial-gradient.

Answer 1

[wonderingpeanut]

box-shadow: inset

Comments

[weranda]

Могли бы вы привести конкретный пример реализации?
https://codepen.io/weranda/pen/BaJEqag

[wonderingpeanut]

weranda,

.wrap{
	height: 100vh;
	background: red;
	margin:0;
	padding:0;
	box-shadow: inset 0 0 100px 100px #ffffff;
}

со значениями box-shadow поэкспериментируй и найди то что нравится

[weranda]

wonderingpeanut, дело в том, что надо сделать по форме овала, а при задании border-radius появляются видимые рамки у скругления. В примере выше это видно.