CSS3 радиальный градиент

Question

Мне нужно знать, возможно ли это вообще. "Творческий" отдел фотошопа придумал это изображение, и до того, как оно стало градиентным, от 1 до 5 цветов. Они все еще делают это, но теперь они как белый круг на вершине. Как бы я вообще смог сделать это? синтаксис примеров не имеет точного позиционирования. Вверху белого круга мне нужно добавить определенный шрифт и текст "в белом"

Спасибо заранее.

Answer 1

Может быть проще использовать несколько наложенных градиентов в качестве фона.

Первый простой линейный градиент, слева направо, а второй радиальный градиент сверху.

Тогда это просто вопрос позиционирования (абсолютно) вашего текстового элемента над белым кружком (помните, вы знаете, где он расположен)

Быстрое и грязное демо:

div {
  height: 350px;
  width: 90%;
  margin: 1em auto;
  border: 1px solid lightgrey;
  background: 
    radial-gradient(circle closest-side at 75% 50%, white, white 60%, transparent), 
    linear-gradient(to right, #344862, white 75%, yellow);
  position: relative;
}
span {
  position: absolute;
  left: 75%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div>
  <span>Lorem ipsum dolor.</span>
</div>

Примечание: как положение центра радиального градиента совпадает с позицией <span>, transform просто гарантирует, что текст центрируется по кругу.