Css radial gradients background

radial — gradient ( )

Функция radial — gradient ( ) используется для задания фона в виде радиального (кругового, эллиптического) градиента.

Пример

Скопировать ссылку «Пример» Скопировано

 .element  background-image: radial-gradient(#6e4aff, #49A16C);> .element  background-image: radial-gradient(#6e4aff, #49A16C); >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Самый простой градиент задаётся двумя цветами.

 .element  background-image: radial-gradient(#09ff00, red);> .element  background-image: radial-gradient(#09ff00, red); >    Скопировать Скопировано Не удалось скопировать   

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

Цветов мы можем перечислить сколько угодно. Браузер сам распределит градиент таким образом, чтобы последний цвет всегда заходил в угол элемента:

 .element  background-image: radial-gradient(yellow, coral, blue, green, white, black);> .element  background-image: radial-gradient(yellow, coral, blue, green, white, black); >    Скопировать Скопировано Не удалось скопировать   

Форма градиента

Скопировать ссылку «Форма градиента» Скопировано

Задаётся ключевым словом circle или ellipse (по умолчанию):

 .element  background-image: radial-gradient(circle, #09ff00, red);> .element  background-image: radial-gradient(circle, #09ff00, red); >    Скопировать Скопировано Не удалось скопировать   

Положение центра

Скопировать ссылку «Положение центра» Скопировано

Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background — position , но с приставкой at : at left , at top , at right , at bottom , at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу.

Вместо ключевых слов мы можем использовать точные значения: at 20 % 50 % или at 130px 500px .

Размер градиента

Скопировать ссылку «Размер градиента» Скопировано

Используя следующие ключевые слова, можно задать размер конечной формы градиента:

• closest — side — градиент имеет такую форму, что заканчивается у ближайшей к центру границы элемента;
• farthest — side — градиент заканчивается у дальней от центра границы элемента;
• closest — corner — форма градиента подбирается таким образом, чтобы его край проходил через ближайший к центру угол;
• farthest — corner — край градиента будет проходить через дальний от центра угол.

Повторяющийся градиент

Скопировать ссылку «Повторяющийся градиент» Скопировано

Если градиент должен многократно повторяться от центра к краям, можно использовать функцию repeating — radial — gradient ( ) .

Множественные градиенты

Скопировать ссылку «Множественные градиенты» Скопировано

Множественный фон элемента может применяться и к градиентам.

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

🛠 Радиальным градиентам можно задавать резкие переходы между цветами. Совместно со свойством background — repeat можно генерировать различные паттерны:

🛠 С помощью радиального градиента можно добиться эффекта круглых отверстий:

Источник

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

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

radial-gradient

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

background: radial-gradient(gold, orangered);

По умолчанию центр градиента находится по центру, градиент имеет форму эллипса:

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

Форма градиента

Форма (конечная фигура градиента) может быть кругом и эллипсом. По умолчанию — эллипс, градиент стремится занять всё свободное пространство элемента, вытягиваясь, если это необходимо.

Чтобы градиент имел форму круга — это нужно задать явно с помощью ключевого слова circle .

Если форма не задана, но задан размер — одно значение задает радиус круга, если значений два — градиент получает форму эллипса. При наличии размеров явное задание формы градиента игнорируется.

Центр градиента

Для задания центра градиента используются те же ключевые слова, что и для линейного градиента, но с приставкой at : at top , at right , at bottom , at left и at center — значение по умолчанию.

Их так же можно сочетать между собой, чтобы расположить градиент на заданной стороне, например: at right top — в верхнем правом углу.

Ниже можно увидеть как работают разные положения центра:

background: radial-gradient(at top left, purple, crimson, orangered, gold);

Также можно задавать точное положение градиента, например at 20% 50% или at 10px 150px .

Размер градиента

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

Если задано одно значение — оно считается радиусом круглого градиента. Если задано два значения — первое считается горизонтальным радиусом эллипса, второе — вертикальным.

Ниже примеры круглых и эллиптических градиентов. Форма фигуры определяется заданными размерами:

Также можно использовать ключевые слова:

closest-side — градиент заканчивается у границы элемента ближайшей к центру градиента. Если это эллипс, градиент касается всех границ элемента.

farthest-side — градиент заканчивается у дальней границы элемента. Если это эллипс, градиент касается всех границ элемента.

closest-corner — конечная фигура растягивается таким образом, чтобы она проходила через угол элемента, ближайший к центру градиента. Если конечная фигура — эллипс, градиент растягивается на всю фигуру. При этом параметре градиент заполняет собой всю фигуру, частично выходя за её пределы.

farthest-corner — аналогично closest-corner , только конечная фигура проходит через угол, дальний от центра градиента. Значение по умолчанию.

Некоторым градиентам добавлено положение at bottom , чтобы было лучше видно действие кода:

repeating-radial-gradient

Радиальный градиент также может быть повторяющимся. Примерный код:

background: repeating-radial-gradient(circle, darkkhaki, darkkhaki .5em, transparent .5em, transparent 1.5em);

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

Upd. от 3.07.20: в данный момент повторяющиеся градиенты корректно отрисоваются в большинстве браузеров.

Сочетая несколько фонов с разными параметрами можно получить удивительные вещи:

Если при создании узоров использовать относительные единицы ( em , % ), а не абсоюлютные ( px ), размер получившихся паттернов потом можно будет легко регулировать изменяя только размер шрифта.

Если вы заинтересовались кодом паттернов, я бы советовала попробовать повторить узор не подглядывая в исходники, это полезно : )

Сайдбар

Статьи

• Математические функции в CSS
• Адаптивное видео с помощью встроенных математических функций CSS
• Недоступность в картинках
• Единицы размеров в CSS
• Генератор цветовых тем
• Jekyll → Gatsby
• Вариативные шрифты
• Размеры в SVG
• Адаптивный Pixel Perfect
• Логотип не отвечает или временно недоступен
• SVG-паттерны
• Мыльные пузыри на SVG
• SVG-градиенты
• Весёлая консолька
• SVG-маски
• Умная прокрутка со Scroll Snap Points
• CSS-анимации для ротации изображений
• Анимированные SVG-маски
• Странности обводки в SVG
• SVG-прелоадеры
• Анимируем градиенты ещё раз
• Background-blend-mode
• Возможности оформления SVG
• CSS и SVG маски
• Nth-child и nth-of-type
• SVG-иконки
• SVG: заливка и обводка
• SVG-path
• SVG: группировка и переиспользование элементов
• SVG-фигуры и трансформации
• SVG
• СSS-градиенты и 3D
• Рисовалка анимированных теней
• Свежие CSS-паттерны
• CSS-паттерны
• Радиальные градиенты
• Линейные градиенты
• Крестики-нолики на CSS
• Border-image
• Электронные часы на CSS и JS.
• Сколько весят селекторы?
• Символы юникода
• Свойство content
• Анимируем CSS-градиенты
• Текстовые эффекты
• Древовидный список на CSS
• Css-селекторы, часть 2
• Css-селекторы
• Контекст наложения
• Два способа «прошить» элемент по краю
• Box-sizing
• Цвета в CSS
• Фон под строчками: добавляем поля
• Box-shadow
• Css-фигуры: лепесток
• Transform
• Css Animation
• 3D-куб
• Border-radius
• First letter
• Эти глаза напротив
• CSS-фигуры
• Стрелки с помощью свойства border
• Flexbox

Страницы

Проекты

Источник