Как получить такой фон?

Question

[saqo_tadevosyan]

Нужно сделать такой фон для страницы , думаю это можно реализовать с помощью градиента но не уверен

Comments

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

Можно просто круглый псевдоэлемент

Answer 1

[Леонид Роженцев]

Можно отрисовать в векторе (svg) и использовать как background-image например.

Answer 2

[ilonikso]

Так же можно использовать svg фигуру, которую поместить background-image в псевдоэлемент ::before, ::after, и спозиционировать в нужное место

Answer 3

[Роман]

Вариант с градиентом:

.block {
  position: relative;
  min-height: 100vh;
  outline: 1px dashed red;
  overflow: hidden;
  background-image: radial-gradient(circle at left,
    rgba(6,0,121,1) 0%,
    rgba(6,0,121,1) 600px,
    rgba(6,0,121,0) 600px);
}

Можно сделать через псевдоэлемент:

.block {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  outline: 1px dashed red;
}

.block::after {
  content: '';
  width: 150vh;
  height: 150vh;
  background-color: blue;
  border-radius: 100%;

  position: absolute;
  top: 50%;
  left: -50vw;
  transform: translateY(-50%);
}

В обоих варантах, желательно знать высоту родительского блока или использовать JS, чтобы ее получить.