Как добиться эффекта (показано на прикрепленном изображении) в CSS

Question

Я бы хотел добиться следующего эффекта в блоке div. Какой CSS поможет? Заранее благодарю за ответы!

Answer 1

Вы можете протестировать несколько инструментов градиента CSS, таких как ColorZilla и GradientFinder для работы с цветами градиента.

Кроме того, комбинируя радиальный градиент низкой непрозрачности с линейным градиентом, вы можете получить более насыщенный вид, который может приблизиться к исходному изображению.

.box {
  display: block;
  width: 182px;
  height: 229px;
  background: 
    radial-gradient(ellipse at center, rgba(252,253,255,.2) 54%,rgba(212,229,255,.2) 66%,rgba(212,229,255,.2) 66%,rgba(153,193,255,.2) 79%,rgba(153,193,255,.2) 79%,rgba(57,136,255,.2) 100%), 
    linear-gradient(to top, rgb(57, 136, 255) 0%, rgb(153, 193, 255) 13%, rgb(212, 229, 255) 23%, rgb(252, 253, 255) 43%, rgb(252, 253, 255) 57%, rgb(212, 229, 255) 77%, rgb(153, 193, 255) 87%, rgb(57, 136, 255) 100%);
  border-radius: 16px 0 0 16px;
}

<div class="box"></div>
<p>original <img src="https://i.stack.imgur.com/OJ5Z6.png" /></p>

Answer 2

Вы можете использовать CSS3 с линейным градиентом . Примерно так:

.demo {
  width: 150px;
  height: 150px;
}
.gradient {
  background: #508cf4; /* Old browsers for fallback */
  background: linear-gradient(to bottom, #508cf4 0%, #ffffff 50%, #508cf4 100%); 
}

<div class="gradient demo"></div>

Вы также можете зайти в "генератор градиентов css3", чтобы получить графический интерфейс. Например cssgradient.io

Answer 3

, как указано в первом ответе, используйте css-градиенты и комбинируйте с border-radius для ваших закругленных углов.

.box{
    height: 200px;
    width: 150px;
    background: linear-gradient(to top, #4690ff, #ffffff, #4690ff);
    border-radius:15px 0px 0px 15px;
}

<div class="box"></div>

Answer 4

Используя функцию линейного градиента в CSS3, код будет + - как это:

.box{
    height: 100px;
    width: 100px;
    background: linear-gradient(to top, blue, white, blue)
}