Как вставить градиент css на тильде

Как вставить градиент css на тильде

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

Чтобы добавить линейный градиент на элемент, перейдите в Настройки Zero Block → Background Color → Linear. Чтобы добавить ещё один цвет, выберите его на панели. Чтобы удалить цвет, зажмите его и потяните вниз. Под палитрой можно задать угол, под которым будет отображаться градиент — введите число или покрутите виджет мышкой.

Радиальный градиент (Radial)

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

Чтобы добавить радиальный градиент на элемент, перейдите в Настройки Zero Block → Background Color → Radial.

Добавляйте градиенты в дизайн вашего проекта без использования дополнительных инструментов, прямо внутри редактора Zero Block.

Градиент на кнопке Тильда

В этой статье быстро и на примере покажем, как сделать правильный градиент на кнопке в конструкторе Тильда.

Пошаговая инструкция создания градиента в Тильде:

1. Создаем Zero-block:

1. Добавляем элемент Кнопка:

1. Вызываем свойства кнопки мышкой (обычно, правой кнопкой мыши) и нажимаем Add CSS Class Name:

1. Называем как угодно (понятно для вас) класс этой кнопки. ВАЖНО: нельзя использовать специальные символы и пробелы, а также кириллицу. Можно только латинские буквы, тире и нижнее подчеркивание. В нашем примере я назвал класс: button_gradient

1. Сохраняем и закрываем редактор Zero-block. Теперь добавляем новый блок на страницу. Заходим во Все блоки, ищем вкладку Другое и находим блок HTML-код

1. Нажмите на кнопку Контент нового блока HTML-кода. В поле необходимо вставить следующий код:

 .button_gradient .tn-atom 

ВАЖНО: в коде нужно поменять название button_gradient на ваше название класса.

Внутри свойства linear-gradient используются следующие значения:

• 45deg — направление градиента;
• #F03358 60% — первый цвет градиента и площадь его положение в процентах (в нашем случае, первый цвет располагается на 60% кнопки);
• #6D107E — второй цвет.

При желании можно добавить и третий, четвертый цвет. Ограничений нет.

1. Сохраняем изменения и публикуем страницу. Получаем результат долгожданный результат:

Пишите в комментариях, все ли у вас получилось

Как вставить градиент css на тильде

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

Чтобы добавить линейный градиент на элемент, перейдите в Настройки Zero Block → Background Color → Linear. Чтобы добавить ещё один цвет, выберите его на панели. Чтобы удалить цвет, зажмите его и потяните вниз. Под палитрой можно задать угол, под которым будет отображаться градиент — введите число или покрутите виджет мышкой.

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

Чтобы добавить радиальный градиент на элемент, перейдите в Настройки Zero Block → Background Color → Radial.

Градиент для фона Тильда

Есть несколько вариантов как сделать градиент для фона в Тильде. Начнем с простых стандартных способов и дальше разберем более сложные варианты.

Добавление градиента в фон через обложку

Наверное, самый простой способ применения градиента к фону — поиск картинки с градиентом. Найти фоновые картинки с градиентом можно в поисковых системах или на сервисе Тильды —Tilda Colors.

Здесь вы можете подобрать понравившийся градиент. Их тут довольно много. Когда выберете, кликайте на стрелочки «Во весь экран»:

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

Теперь, когда градиент уже сохранен, вы сможете добавить его как обложку к блоку. Такой вариант подходит для Zero block и для стандартных блоков, у которых есть возможность добавления обложек на фон.

Плавное изменение фона у блоков

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

Смотрите, как это выглядит в действии:

Как сделать такую плавную смену цвета? Инструкция ниже:

1. Задайте необходимые разные цвета фона для ваших блоков. Т.е. фон одного блока будет плавно переходить в фон другого.
2. Между этими блоками (с разными цветами фона) добавьте блок DV11A (Переключатель цвета фона. Плавная смена цвета). Он находится в Все блоки -> Разделитель:

1. Задайте в настройках блока «Переключатель цвета фона» цвет, на который будет переключатся цвет фона. Выберите тот цвет, который стоит на фоне следующего блока после переключателя.
2. Сохраните и опубликуйте страницу.

Вот и все, плавный переход работает.

Добавление градиента к любому блоку через вставку HTML-кода

Вот этот трюк немного сложнее. Но и преимущества у него очевидные — вы можете применить градиент к любому блоку в Тильде.

Что нужно сделать:

1. Добавьте блок на страницу. Для примера я взял стандартный блок из раздела «Преимущества» FR101.
2. Опубликуйте страницу. Нам нужно посмотреть код опубликованной страницы, чтобы увидеть класс блока, к которому будет применен градиент.
3. Зайдите на опубликованную страницу и вызовите инспектор. Это можно сделать нажав кнопку F12, Ctrl+Shift+I (или Cmd+Opt+I для Mac). Также можно кликнуть правой кнопкой мыши на любую зону вашего блока и нажать «Посмотреть Код»:

1. Каждый блок Тильды отграничивается от другого разделителем. В нашем случае это:

Сразу под ним вы увидите класс блока Преимуществ:

Скопируйте класс блока. В нашем примере это будет t508

1. Теперь вернитесь в редактор странице на Тильде. Добавьте блок T123 (HTML-код). Найти его можно в разделе Все блоки -> Другое. В контент блока вам нужно вставить следующий код:

• .t508 — класс блока, который вы получили из инспектора
• 0deg — угол наклона градиента в градусах. Если вы зададите 90deg, то смена цвета будет проходить по горизонтали.
• #FA709A — начальный цвет градиента. Тут вставляете выбранный нужный цвет
• #FEE140 — конечный цвет градиента. Тут тоже вставляете выбранный нужный цвет.

Получается такая картина в блоке:

1. Сохраните и опубликуйте страницу. У меня получилось вот так:

У вас получится еще лучше.

Ну а если, что-то не получилось, опишите подробно проблему. Мы попробуем вам помочь с добавлением градиента в фон Тильды.

Как сделать обложку сайта: практические советы арт-директора

Основное правило при создании обложек: главное — это текст, фотография стоит на втором месте.

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

При этом фотография не обязательно должна прямо иллюстрировать ваше предложение. Фотография — это фон, поэтому она может просто поддерживать коммуникацию. Например, обложка Tilda Education — девушка делает исследование, но это не значит, что сайт посвящен только исследованиям. В данном случае обложка — это настроение. Она вдохновляет и погружает в контекст.

Бесплатные изображения для сайта можно найти на профессиональных фотостоках, распространяющих картинки по лицензии Creative Commons Zero (CC0). Это значит, что изображение освобождено от ограничений авторского права, то есть его можно как угодно использовать и изменять, в том числе в коммерческих целях.

Примеры ресурсов с качественными изображениями: Unsplash, Pexels, Stocksnap, Rawpixel.

В идеале фотография для обложки должна быть пустой по центру: без сюжета и мелких деталей.

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

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

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

Когда текст читается хорошо, то удачная фотография сделает его сильнее. Например, на обложку вы ставите фото с прошлой конференции. Люди видят, как проходят ваши события — у вас был большой зал и много людей, или наоборот камерная обстановка. Фотография заменяет пару-тройку абзацев текста. Но сначала все-таки люди должны узнать про место и время.

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

Вот несколько примеров шаблонов, которые сделали дизайнеры Тильды. Каждый из шаблонов — пример разного подхода к подбору обложки:

Как сделать градиент текста в Тильде?

Чтобы сделать цветной градиент в Тильде, задайте цвет верхнего и нижнего фильтра в настройках. Можно поставить однотонное тонирование или сделать комбинацию из пары оттенков. Интенсивность цвета фона зависит от значений в поле «Непрозрачность». Можно красить не только фон, но и текст.

Как двигать текст в тильде?

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

Как сделать градиент текста в HTML?

1. color: transparent; – задает прозрачный цвет шрифта.
2. background-clip: text; – окрашивает текст в цвет или изображение указанного в background-image .
3. background-image: linear-gradient или background-image: radial-gradient – задает градиент.

Как добавить класс элементу в тильде?

1. шаг Создайте дизайн в Zero Block.
2. шаг Нажмите на заголовок правой кнопкой мыши, выберите Add CSS class name. Задайте название стиля, например, gradient.
3. шаг

Как сделать кнопку в тильде?

Чтобы добавить кнопку, используйте блоки из категории «Форма и кнопка». Вы можете добавить одну или несколько кнопок, а также готовые блоки с текстом, изображением и кнопкой. Если вам нужна кнопка на обложке, используйте блоки CR12, CR15, CR16, CR17, CR19A, CR30N, CR43 из категории «Обложка».

Что такое верстка сайта на тильде?

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

Как убрать висячие предлоги в тильде?

В Тильде есть инструмент — типограф, который автоматически заменит все неправильные кавычки и тире, уберет лишние пробелы, а также поставит неразрывные пробелы, чтобы в тексте не было «висячих» предлогов.

Как сделать новости на тильде?

1. Потоки — это возможность сделать несколько лент мгновенно обновляемых новостей или постов. .
2. Активируйте функцию в Настройках сайта → Еще → Потоки. .
3. Создайте новый поток с помощью кнопки в верхнем правом углу. .
4. Создайте новый пост с помощью кнопки в правом верхнем углу и укажите его заголовок.

Как сделать градиент на фоне CSS?

Как сделать фоновый линейный градиент в CSS. В CSS3 вы можете добавлять градиентный фон к элементам через уже известное свойство background-image . В качестве значения используется ключевое слово linear-gradient() , где в скобках необходимо указать стартовую точку градиента, начальный цвет и конечный цвет.

Как сделать градиент тексту?

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

Удерживая клавишу Ctrl (Command в ОС Mac OS), нажмите миниатюру текстового слоя на панели «Слои». Активизируйте инструмент «Градиент». Нажмите нужный тип градиента на панели параметров инструмента. Выберите градиентную заливку на панели «Выбор градиента».

Как сделать градиент в Фигме?

Чтобы сделать градиент в фигме выделите прямоугольник или другую векторную фигуру. В правой панели, напротив надписи «Fill» нажмите на цвет. Вместо значения «Solid» поставьте одно из следующих значений: Linear — линейный градиент.

Как вставить код на кнопку в тильде?

Чтобы добавить код в head на все страницы, нужно зайти: «Настройки сайта» → «Еще» → «HTML-код для вставки внутрь head». Чтобы добавить код в Head на отдельной странице, нужно зайти: «Настройки страницы» → «Дополнительно» → «HTML-код для вставки внутрь head».

Как подключить CSS в тильде?

Откройте «Библиотеку блоков» → «Другое» и добавьте блок «T123. HTML-код». В режиме редактирования («Контент») вы сможете добавить HTML, CSS и Javascript-код. Код будет выполнен на опубликованной странице.

Похожие публикации:

1. Как выстроить блоки в ряд css
2. Как для кнопки добавить галочку css
3. Как убрать отступы у блока в css
4. Как убрать рамку в css

Использование CSS-градиентов

CSS-градиенты представлены типом данных (en-US), специальным типом (en-US), состоящим из последовательного перехода между двумя и более цветами. Вы можете выбрать один из трёх типов градиентов: линейный (создаётся с помощью функции linear-gradient() (en-US)), круговой (создаётся с помощью radial-gradient() (en-US)) и конический (создаётся с помощью функции conic-gradient() (en-US)). Вы можете также создавать повторяющиеся градиенты с помощью функций repeating-linear-gradient() (en-US), repeating-radial-gradient() (en-US) и repeating-conic-gradient() (en-US).

Градиенты могут быть использованы везде, где может быть использован тип , например в качестве фона. Так как градиенты генерируются динамически, они могут избавить от необходимости использовать файлы растровых изображений, которые ранее использовались для достижения похожих эффектов. В дополнение к этому, так как градиенты генерируются браузером, они выглядят лучше, чем растровые изображения в случае увеличения масштаба, и их размер может быть изменён на лету.

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

Использование линейных градиентов

Линейный градиент создаёт цветную полосу, имеющую вид прямой линии.

Обычный линейный градиент

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

div class="simple-linear">div> 

div  width: 120px; height: 120px; > 

.simple-linear  background: linear-gradient(blue, pink); > 

Изменение направления

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

div class="horizontal-gradient">div> 

div  width: 120px; height: 120px; > 

.horizontal-gradient  background: linear-gradient(to right, blue, pink); > 

Диагональные градиенты

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

div class="diagonal-gradient">div> 

div  width: 200px; height: 100px; > 

.diagonal-gradient  background: linear-gradient(to bottom right, blue, pink); > 

Использование углов

Если вы хотите больше контроля над его направлением, вы можете задать градиенту определённый угол.

div class="angled-gradient">div> 

div  width: 120px; height: 120px; > 

.angled-gradient  background: linear-gradient(70deg, blue, pink); > 

При использовании угла 0deg создаётся вертикальный градиент, идущий снизу вверх, 90deg создаёт горизонтальный градиент, идущий слева направо, и так далее по часовой стрелке. Отрицательные углы идут против часовой стрелки.

Указание цветов и создание эффектов

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

Использование более двух цветов

Вам не нужно ограничиваться двумя цветами – вы можете использовать столько, сколько хотите! По умолчанию цвета равномерно распределены по градиенту.

div class="auto-spaced-linear-gradient">div> 

div  width: 120px; height: 120px; > 

.auto-spaced-linear-gradient  background: linear-gradient(red, yellow, blue, orange); > 

Расположение точек остановок цветов

Вам не нужно оставлять ваши точки остановок цветов на их исходных позициях. Чтобы подправить их расположение, вы можете не задавать каждому ничего, или задать одну или две процентные, а для круговых и линейных градиентов – абсолютные значения. Если вы зададите расположение с процентах, 0% будет представлять начальную точку, в то время как 100% будет являться конечной точкой; однако, если необходимо, вы можете использовать значения и вне этого диапазона для достижения желаемого эффекта. Если вы не будете задавать расположение, позиция этой точки остановки будет автоматически рассчитана за вас так, что первая точка остановки будет расположена на 0% , а последняя – на 100% , а все остальные точки остановки будут расположены на полпути между соседними точками остановки.

div class="multicolor-linear">div> 

div  width: 120px; height: 120px; > 

.multicolor-linear  background: linear-gradient(to left, lime 28px, red 77%, cyan); > 

Создание резких переходов

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

div class="striped">div> 

div  width: 120px; height: 120px; > 

.striped  background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%); > 

Подсказки градиента

По умолчанию градиент идёт плавно от одного цвета до другого. Вы можете добавить цветовую подсказку, чтобы переместить значение средней точки перехода в определённую точку градиента. В этом примере мы переместили среднюю точку перехода из отметки 50% на отметку 10%.

div class="color-hint">div> div class="simple-linear">div> 

div  width: 120px; height: 120px; float: left; margin-right: 10px; > 

.color-hint  background: linear-gradient(blue, 10%, pink); > .simple-linear  background: linear-gradient(blue, pink); > 

Создание цветных линий и полосок

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

div class="multiposition-stops">div> div class="multiposition-stop2">div> 

div  width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; > 

.multiposition-stops  background: linear-gradient( to left, lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% ); background: linear-gradient( to left, lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% ); > .multiposition-stop2  background: linear-gradient( to left, lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% ); background: linear-gradient( to left, lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% ); > 

В первом примере выше лаймовый цвет идёт от отметки 0%, далее, как указано, до отметки 20%, сделает переход от лаймового до красного через 10% ширины градиента, достигнет сплошного красного на отметке 30%, и останется таким до 45% градиента, где он потускнеет до голубого, оставаясь таким ещё 15% градиента, и так далее.

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

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

Управление переходом градиента

По умолчанию градиент плавно переходит между цветами двух соседних точек остановки, а средняя точка между этими двумя точками остановки является средним значением цветового перехода. Вы можете контролировать интерполяцию или переход между двумя точками остановки добавлением его расположения в цветовой подсказке. В этом примере цвет достигает средней точки перехода от лаймового до голубого на расстоянии 20% градиента вместо стандартных 50%. Во втором примере нет такой подсказки, чтобы подчеркнуть отличие, получаемое при её использовании:

div class="colorhint-gradient">div> div class="regular-progression">div> 

div  width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; > 

.colorhint-gradient  background: linear-gradient(to top, black, 20%, cyan); > .regular-progression  background: linear-gradient(to top, black, cyan); > 

Перекрытие градиентов

Градиенты поддерживают прозрачность, так что вы можете накладывать фоны для получения всяких разных эффектов. Фоны накладываются снизу вверх таким образом, что первый объявленный будет лежать поверх остальных.

div class="layered-image">div> 

div  width: 300px; height: 150px; > 

.layered-image  background: linear-gradient(to right, transparent, mistyrose), url("critters.png"); > 

Наслаивание градиентов

Вы можете даже наслаивать градиенты друг на друга. Если верхние градиенты не полностью непрозрачны, градиенты, лежащие под ними, тоже будут видны.

div class="stacked-linear">div> 

div  width: 200px; height: 200px; > 

.stacked-linear  background: linear-gradient( 217deg, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0) 70.71% ), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%); > 

Использование круговых градиентов

Круговые градиенты схожи с линейными градиентами, за исключением того, что они создают градиентный круг по направлению от центральной точки. Вы можете указать, где должна находиться центральная точка. Вы также можете сделать её круглой или овальной.

Обычный круговой градиент

Как и в случае с линейными градиентами, всё, что вам нужно, чтобы создать круговой градиент – это два цвета. По умолчанию центр градиента находится на отметке 50% 50%, градиент становится овальным с учётом соотношения сторон содержащего его блока:

div class="simple-radial">div> 

div  width: 240px; height: 120px; > 

.simple-radial  background: radial-gradient(red, blue); > 

Размещение круговых точек остановки

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

div class="radial-gradient">div> 

div  width: 120px; height: 120px; > 

.radial-gradient  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%); > 

Расположение центра градиента

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

div class="radial-gradient">div> 

div  width: 120px; height: 240px; > 

.radial-gradient  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%); > 

Задание размеров кругового градиента

В отличие от линейных градиентов, круговому градиенту можно задавать размеры. Возможные значения включат в себя: ближайший угол, ближайшая сторона, самый дальний угол и самая дальняя сторона, самый дальний угол – значение по умолчанию.

Пример: ближайшая сторона для эллипса

В этом примере используется значение размера closest-side , которое означает, что размер определяется расстоянием от начальной точки (центра) до ближайшей стороны блока.

div class="radial-ellipse-side">div> 

div  width: 240px; height: 100px; > 

.radial-ellipse-side  background: radial-gradient( ellipse closest-side, red, yellow 10%, #1e90ff 50%, beige ); > 

Пример: самый дальний угол для эллипса

Этот пример схож с предыдущим, за исключением того, что его размер указан как farthest-corner , что устанавливает размер градиента значением расстояния от начальной точки до самого дальнего угла блока.

div class="radial-ellipse-far">div> 

div  width: 240px; height: 100px; > 

.radial-ellipse-far  background: radial-gradient( ellipse farthest-corner at 90% 90%, red, yellow 10%, #1e90ff 50%, beige ); > 

Пример: ближайшая сторона для круга

Этот пример использует closest-side , что задаёт размер круга как расстояние между начальной точкой (центром) и ближайшей стороной. Радиус круга – это расстояние между центром градиента и ближайшей стороной. Круг, с учётом позиционирования в точке 25% от левой стороны и 25% от низа, ближе всего к низу, так как расстояние по высоте в этом случае меньше, чем по ширине.

div class="radial-circle-close">div> 

div  width: 240px; height: 120px; > 

.radial-circle-close  background: radial-gradient( circle closest-side at 25% 75%, red, yellow 10%, #1e90ff 50%, beige ); > 

Наложение круговых градиентов

Вы можете накладывать круговые градиенты так же, как линейные. Первый объявленный будет сверху, последний – снизу.

div class="stacked-radial">div> 

div  width: 200px; height: 200px; > 

.stacked-radial  background: radial-gradient( circle at 50% 0, rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0) 70.71% ), radial-gradient( circle at 6.7% 75%, rgba(0, 0, 255, 0.5), rgba(0, 0, 255, 0) 70.71% ), radial-gradient( circle at 93.3% 75%, rgba(0, 255, 0, 0.5), rgba(0, 255, 0, 0) 70.71% ) beige; border-radius: 50%; > 

Использование конических градиентов

CSS-функция conic-gradient() создаёт изображение, состоящее из градиента с переходом цвета, обёрнутым вокруг центральной точки (в отличие от градиента, исходящего кругом от центральной точки). Образцом конического градиента можно назвать круговые диаграммы и цветовые круги, но он также может быть использован для создания шахматной доски (клетки) и других интересных эффектов.

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

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

Обычный конический градиент

Так же, как и в случае с линейными и круговыми градиентами, всё, что вам нужно для создания конического градиента – это два цвета. По умолчанию центр градиента находится в точке 50% 50%, начало градиента направлено вверх:

div class="simple-conic">div> 

div  width: 120px; height: 120px; > 

.simple-conic  background: conic-gradient(red, blue); > 

Расположение конического центра

Как и в круговом градиенте, вы можете задать расположение центра конического градиента с помощью ключевых значений, процентных или абсолютных величин с использованием ключевого слова «at».

div class="conic-gradient">div> 

div  width: 120px; height: 120px; > 

.conic-gradient  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%); > 

Изменение угла

Вы можете задать угол, в котором направлено начало градиента значением типа , с предшествующим ему ключевым словом «from».

div class="conic-gradient">div> 

div  width: 120px; height: 120px; > 

.conic-gradient  background: conic-gradient( from 45deg, red, orange, yellow, green, blue, purple ); > 

Использование повторяющихся градиентов

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

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

В этом примере используется repeating-linear-gradient() (en-US) для создания повторяющегося градиента, идущего по прямой линии. Цветовая последовательность начинается заново с каждым повторением градиента. В данном случае градиент имеет длину 10px.

div class="repeating-linear">div> 

div  width: 120px; height: 120px; > 

.repeating-linear  background: repeating-linear-gradient( -45deg, red, red 5px, blue 5px, blue 10px ); > 

Множественные повторяющиеся линейные градиенты

Так же, как и в случае с обычными линейными и круговыми градиентами, вы можете использовать множественные градиенты, один поверх другого. Это имеет смысл, только если градиенты частично прозрачны, что позволяет видеть одни градиенты сквозь прозрачные части других градиентов, этого же можно достичь при условии использования разных размеров фона (background-size), при этом возможно ещё и при разных значениях свойства background-position для каждого градиента. Мы использовали прозрачность.

В данном случае градиентные линии имеют длину 300px, 230px и 300px.

div class="multi-repeating-linear">div> 

div  width: 600px; height: 400px; > 

.multi-repeating-linear  background: repeating-linear-gradient( 190deg, rgba(255, 0, 0, 0.5) 40px, rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px, rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px, rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px, rgba(255, 0, 0, 0.5) 300px ), repeating-linear-gradient( -190deg, rgba(255, 0, 0, 0.5) 30px, rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px, rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px, rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px, rgba(255, 0, 0, 0.5) 230px ), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green 200px, blue 250px, indigo 300px, violet 350px, red 370px); > 

Клетчатый градиент

Для создания клетчатого градиента мы используем несколько полупрозрачных перекрывающих друг друга градиентов. В первом объявлении фона мы внесли в список каждую остановку цвета отдельно. Во втором объявлении свойства background используется синтаксис многопозиционных остановок цвета:

div class="plaid-gradient">div> 

div  width: 200px; height: 200px; > 

.plaid-gradient  background: repeating-linear-gradient( 90deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px ), repeating-linear-gradient( 0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px ), repeating-linear-gradient( -45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px ), repeating-linear-gradient(45deg, transparent, transparent 5px, rgba( 143, 77, 63, 0.25 ) 5px, rgba(143, 77, 63, 0.25) 10px); background: repeating-linear-gradient( 90deg, transparent 0 50px, rgba(255, 127, 0, 0.25) 50px 56px, transparent 56px 63px, rgba(255, 127, 0, 0.25) 63px 69px, transparent 69px 116px, rgba(255, 206, 0, 0.25) 116px 166px ), repeating-linear-gradient( 0deg, transparent 0 50px, rgba(255, 127, 0, 0.25) 50px 56px, transparent 56px 63px, rgba(255, 127, 0, 0.25) 63px 69px, transparent 69px 116px, rgba(255, 206, 0, 0.25) 116px 166px ), repeating-linear-gradient( -45deg, transparent 0 5px, rgba(143, 77, 63, 0.25) 5px 10px ), repeating-linear-gradient(45deg, transparent 0 5px, rgba( 143, 77, 63, 0.25 ) 5px 10px); > 

Повторяющиеся круговые градиенты

В этом примере для создания кругового градиента, повторяющегося из центральной точки, используется repeating-radial-gradient() (en-US). Цветовая последовательность начинаются заново с каждой итерацией повторения градиента.

div class="repeating-radial">div> 

div  width: 120px; height: 120px; > 

.repeating-radial  background: repeating-radial-gradient( black, black 5px, white 5px, white 10px ); > 

Множественные повторяющиеся круговые градиенты

div class="multi-target">div> 

div  width: 250px; height: 150px; > 

.multi-target  background: repeating-radial-gradient( ellipse at 80% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 15px, rgba(255, 255, 255, 0.5) 15px, rgba(255, 255, 255, 0.5) 30px ) top left no-repeat, repeating-radial-gradient( ellipse at 20% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 10px, rgba(255, 255, 255, 0.5) 10px, rgba(255, 255, 255, 0.5) 20px ) top left no-repeat yellow; background-size: 200px 200px, 150px 150px; > 

Смотрите также

• Градиентные функции: linear-gradient() (en-US), radial-gradient() (en-US), conic-gradient() (en-US), repeating-linear-gradient() (en-US), repeating-radial-gradient() (en-US), repeating-conic-gradient() (en-US)
• Типы данных CSS, связанные с градиентами: (en-US), (en-US)
• Свойства CSS, связанные с градиентами: background , background-image
• Галерея шаблонов градиентов CSS, от Lea Verou
• Библиотека градиентов CSS3, от Estelle Weyl
• Генератор градиентов CSS

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.