Color Gradient — лучший генератор градиента CSS.
Конический градиент проходит по 360-градусному контуру с несколькими цветами, расположенными вдоль этой линии. Цвета переходят вокруг центральной точки и постепенно переходят от одного к другому. Conic-gradient() — это функция CSS, которую необходимо указать в свойстве background-image.
Цветовой градиент — это бесплатный инструмент для создания градиентов css. Этот инструмент поддерживает полную спецификацию фона css. С помощью цветового градиента вы можете легко создавать простые градиенты, а также гораздо более сложные типы градиентов, такие как узоры и радиальные градиенты. На этом веб-сайте также есть несколько интересных статей о CSS-трюках (включая градиенты), о которых вы, возможно, еще не знали.
Спецификация CSS определяет конический градиент следующим образом: background-image: conic-gradient([ from Conic-gradient определяет тип градиента.
Это также может быть линейный градиент радиального градиента. При желании вы можете указать линию, по которой должен следовать градиент, задав угол или аргумент стороны или угла.
Самый простой сценарий создаст градиент от одной точки к другой, линия градиента будет идти «круглосуточно» с резким переходом между двумя цветами на одном участке и плавным переходом на другом. фоновое изображение: конический градиент (#A100FFFF, #119CFDFF)
Установив угол в качестве первого аргумента, вы можете указать начальную точку, из которой начинается градиент. Этот аргумент задается в градусах в диапазоне от 0 до 360 градусов.
Однако вы также можете использовать «рад», «поворот» или «град» в качестве значения единицы измерения для свойства угла. фоновое изображение: конический градиент (от 36 градусов, #A100FFFF, #119CFDFF)
Аргумент position сообщает браузеру, где отображать центральную точку конического градиента.
Например, если вы укажете это на 0px 0px, центральная точка будет в левом верхнем углу. Для получения дополнительной информации оформите заказ
значение позиции. конический градиент (от 36 градусов при 20% 80%, #A100FFFF, #119CFDFF)
Определите несколько цветовых остановок, добавив остановку в список угловых цветовых остановок. Одно значение состоит из значения цвета, за которым следует одно или два необязательных положения остановки.
Это можно указать в свойстве угла. Первое свойство угла указывает начальную точку, а второе значение указывает конечную точку. При исключении значений угла цвета будут равномерно распределены по доступному пространству.
Указав вторую точку остановки цвета, вы можете создавать резкие переходы между цветами.
background-image: conic-gradient(from 36deg at 20% 80%, #A100FFFF 0% 25%, #000000 25% 30%, #119CFDFF 30% 50%;
Ознакомьтесь с нашим потрясающим генератором градиентов. Это просто и использовать и имеет много сложных функций градиента css
Перейти к генератору
Все о CSS-градиентах
Статья
CSS-градиент
Что такое градиент CSS? Какие градиенты можно создать в CSS? Можете ли вы сложить несколько слоев градиентов?
Статья
Линейный градиент
Это, пожалуй, самый распространенный градиент. Линейный градиент следует прямому пути от одной точки к другой.
В этой статье показано, как определить линейный градиент CSS.
Статья
Радиальный градиент
Он излучает цвета изнутри или снаружи внутрь. Вам решать! Прочитайте, как определить радиальный градиент CSS.
Статья
Конический градиент
Конический градиент. Он излучает свои цвета по часовой стрелке. Может быть, вы можете создать интересные часы с ним?
Вскоре!
Шаблоны градиента CSS
Комбинируя линейный и радиальный градиенты, вы можете создавать довольно интересные узоры. Важным фактором является свойство background-size.