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

Development | Amber | Комментировать запись

CSS наконец-то позволяет определять радиальные и линейные градиенты – для этого больше не нужно создавать изображения в другой программе, теперь это делается с помощью чистого CSS.

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

Вот базовый синтаксис определения радиального градиента.

/* Простейший случай */
.box {
  background: radial-gradient(black, white);
}

/* Этот синтаксис использует в качестве центральной фигуры круг, а не эллипс, а также добавляет третью цветную точку */
.box {
 background: radial-gradient(circle, #211533, #211533,
             #3e275f);
}

/* Управление размером градиента */
.box {
  background: radial-gradient(farthest-corner at 10px 10px,
              #211533 40%, #3e275f);
}

.box2 {
  background: radial-gradient(
                farthest-side circle at 10px 10px,
                #211533 40%, #3e275f);
}

Читайте также: Градиент и изображения-границы на чистом CSS

Определение стандартного цвета

Сегодня большинство браузеров поддерживают градиент – большинство, но не все. По-прежнему остаются браузеры, которые не смогут обработать свойства gradient. На случай, если ваша аудитория использует браузер без поддержки градиента, рекомендуется определить стандартный цвет, который заменит собой градиент. Это делается так:

.box {
 background: #211533;
 background: radial-gradient(to top, #211533, #211533, #3e275f);
}

Больше о поддержке css-градиентов вы можете узнать здесь.