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

Продолжим изучение темы CSS3 - градиент. Если пропустили прошлую статью, то вот ссылка на неё:

① Линейный градиент

Радиальный градиент отличается от линейного тем, что цвета выходят из одной точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга или эллипса.

background: radial-gradient(форма градиента / размер / позиция центра, первый цвет, второй цвет и т.д.);

Форма градиента определяется ключевыми словами circle или ellipse. Если форма не задана, по умолчанию радиальный градиент принимает форму эллипса.

div {
height: 200px;
background: radial-gradient(white, #FFA9A1);
}

📷 radial-gradient(white, #FFA9A1)

Позиция центра задаётся с помощью ключевых слов, используемых в свойстве background-position, с добавлением приставки at. Если позиция центра не задана, используется значение по умолчанию at center.

div {
height: 200px;
background: radial-gradient(at top, #FEFFFF, #A7CECC);
}

📷 radial-gradient(at top, #FEFFFF, #A7CECC)

С помощью пары значений, указанных в единицах длины %, em или px, можно управлять размером эллипсообразного градиента. Первое значение задает ширину эллипса, второе — высоту.

div {
height: 200px;
background: radial-gradient(40% 50%, #FAECD5, #CAE4D8);
}

📷 radial-gradient(40% 50%, #FAECD5, #CAE4D8)

Размер градиента задаётся с помощью ключевых слов. Значение по умолчанию farthest-corner (к дальнему углу).

Значение / Описание

closest-side - Размер градиента рассчитывается из расстояния до любой ближней стороны блока для circle или до ближних сторон по X и по У для ellipse.
farthest-side - Размер рассчитывается из расстояния до дальних сторон.
closest-corner - Размер рассчитывается из расстояния до ближних углов.
farthest-corner - Размер рассчитывается из расстояния до дальних углов.

div {
height: 200px;
background: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B);
}

📷 radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B)

С помощью радиального градиента можно создавать реалистичные объёмные фигуры, такие как мячи, кнопки.

Мяч

📷 Мяч

div {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0 auto;
background: radial-gradient(circle at 65% 15%, aqua, darkblue);
}

Кнопка

📷 Кнопка

<div class="wrap"><div class="button"></div></div>

.wrap {
height: 200px;
padding: 50px 0;
background: #cccccc;
}
.button {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto; 
background: radial-gradient(farthest-side ellipse at top left, white, #aaaaaa);
box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5);
}

Почтовая марка

📷 Почтовая марка

Используя в градиентах прозрачный цвет, можно создавать вот такие эффекты.

<div class="container">
<div class="wrap">
  <img src="https://html5book.ru/wp-content/uploads/2015/10/flowers-by-barbara-florchik-2.jpg">
</div>
</div>

.container {
background: #B7D1D8;
padding: 25px;
}
.wrap {
background: radial-gradient(transparent, transparent 4px, white 4px,white);
padding: 10px;
width: 300px;
height: 220px;
background-size: 20px 20px;
background-position: -10px -10px; /*обрезаем узор по краю*/
margin: 0 auto;
}
img {
width: 100%;
}