Функция CSS conic-gradient();

Определение и использование

CSS conic-gradient(); Функция устанавливает коническую градиентную заливку в качестве фонового изображения.

Коническая градиентная заливка - это градиентная заливка, где цветовая трансформация вращается вокруг центральной точки (аналогично круговой диаграмме и колеса цветов).

Для создания конической градиентной заливки необходимо определить по крайней мере два цветовых останова.

Пример конической градиентной заливки:

Пример

Пример 1

Коническая градиентная заливка с тремя цветами:

#grad {
  background-image: коническая градиентная заливка(красный, желтый, зеленый);
}

Попробуйте сами

Пример 2

Коническая градиентная заливка с пятью цветами:

#grad {
  background-image: коническая градиентная заливка(красный, желтый, зеленый, синий, черный);
}

Попробуйте сами

Пример 3

Коническая градиентная заливка с тремя цветами и указанием угла для каждого цвета:

#grad {
  background-image: коническая градиентная заливка(красный 45deg, желтый 90deg, зеленый 210deg);
}

Попробуйте сами

Пример 4

Добавлением border-radius: 50% коническая градиентная заливка выглядит как круговая диаграмма:

#grad {
  background-image: коническая градиентная заливка(красный, желтый, зеленый, синий, черный);
  border-radius: 50%;
}

Попробуйте сами

Пример 5

Коническая градиентная заливка с начальным углом:

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}

Попробуйте сами

Пример 6

Коническая градиентная заливка с положением центра:

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Попробуйте сами

Пример 7

Коническая градиентная заливка с начальным углом и положением центра:

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

Попробуйте сами

Пример 8

Другой пример кругового градиента:

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

Попробуйте сами

Синтаксис CSS

background-image: conic-gradient([from Угол] Позиция,] Цветовой градиент, Цветовой градиент, ...);

Технические детали

Поддержка браузерами

Числа в таблице показывают версию первого браузера, который полностью поддерживает эту функцию.

Соответствующие страницы

Урок:CSS градиент

См. также:Свойство background-image CSS

См. также:Функция CSS linear-gradient()

См. также:Функция CSS radial-gradient()

См. также:Функция CSS repeating-conic-gradient()

См. также:Функция CSS repeating-linear-gradient()

См. также:Функция repeating-radial-gradient() в CSS