Как сверстать такой блок?

Question

[Илья Петров]

Как сверстать такой боковой свет?

В макете Figma отрисовано через круг + blur.

Я также пробовал реализовывать через filter: blur, но в каждом браузере оттенок и яркость разные.
Как реализовать свет как в макете?

.experience {
    padding: 72px 0 80px;
    position: relative;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.experience:after {
    content: "";
    width: 542px;
    height: 542px;
    display: block;
    border-radius: 50%;
    background-color: #3D58A9;
    position: absolute;
    top: 208px;
    right: -342px;
    z-index: 2;
    -webkit-filter: blur(500px);
    filter: blur(500px)
}

Comments

[Anonymous Penguin]

А можно хтмл разметку?

[Илья Петров]

[Илья Петров]

[Антон Литвиненко]

radial-gradient
картинку на бакгроунд

[Илья Петров]

Anonymous Penguin, весь блок верстать целиком не нужно.
Только боковой свет, я его через псевдоэлемент отрисовал

[Anonymous Penguin]

Илья Петров, я имел ввиду как ты реализовал разметку, чтобы можно было ответить точнее

P.S. согласен с Антон Литвиненко

[Илья Петров]

Anonymous Penguin,

<section class="experience" id="experience">
				<div class="row">
					<div class="experience__content">
						<h2 class="experience__title">
							Отраслевой опыт
						</h2>

						<p class="experience__desc">
							Мы являемся универсальным поставщиком технологий и бизнес-решений
						</p>

						<div class="experience__activity">
							<h4 class="experience-activity__title">Сферы деятельности:</h4>

							<div class="experience-activity__items">
								<a class="experience-activity__item">Трейдинг</a>
								<a class="experience-activity__item">Инвестиции</a>
								<a class="experience-activity__item">Финансы</a>
								<a class="experience-activity__item">Блокчейн</a>
							</div>
						</div>

						<div class="experience__service">
							<h4 class="experience-service__title">Модель обслуживания:</h4>

							<div class="experience-service__items">
								<a class="experience-service__item">White Label</a>
								<a class="experience-service__item">SaaS и BaaS</a>
								<a class="experience-service__item">Custom Development</a>
								<a class="experience-service__item">Outsourcing</a>
							</div>
						</div>
					</div>

					<div class="experience__stats">
						<div class="experience__stat">
							<div class="experience-stat__counter">
								<span class="num">100</span>
								<span class="symbol">+</span>
							</div>

							<p class="experience-stat__desc">Институциональных клиентов</p>

							<div class="experience-stat__img">
								<img src="/assets/images/icons/experience-stat-1.svg" alt="">
							</div>
						</div>

						<div class="experience__stat">
							<div class="experience-stat__counter">
								<span class="num">150</span>
								<span class="symbol">+</span>
							</div>

							<p class="experience-stat__desc">Квалифицированных сотрудников</p>

							<div class="experience-stat__img">
								<img src="/assets/images/icons/experience-stat-2.svg" alt="">
							</div>
						</div>

						<div class="experience__stat">
							<div class="experience-stat__counter">
								<span class="num">35</span>
								<span class="symbol">+</span>
							</div>

							<p class="experience-stat__desc">Международных партнеров</p>

							<div class="experience-stat__img">
								<img src="/assets/images/icons/experience-stat-3.svg" alt="">
							</div>
						</div>
					</div>
				</div>
			</section>

Answer 1

[r1seq]

Попробуйте сделать блок с градиентом внутри
https://www.css-gradient.com/