Генератор CSS-градиентов (слои, повтор)
Создавайте линейные, радиальные и конические градиенты, накладывайте несколько слоёв, перетаскивайте опорные точки, задавайте угол, центр, прозрачность и повтор и копируйте CSS
Загрузка инструмента…
Собирает фон из до четырёх наложенных друг на друга линейных, радиальных или конических градиентов и выдаёт CSS для background-image. Полупрозрачные слои дают эффекты света или mesh-градиента, повтор даёт полосы и кольца, а картинку можно сохранить как PNG.
Как пользоваться
- Начните с плитки в разделе «Готовые варианты» или с настроек по умолчанию. В разделе «Слои» выберите слой для редактирования и задайте «Тип», «Угол» и «Повтор».
- Для радиальных и конических слоёв нажмите или перетащите в области предпросмотра, чтобы сдвинуть центр, и выберите «Форма» и «Размер».
- Нажмите на полосу «Опорные точки», чтобы добавить точку, и перетащите кружок, чтобы её сдвинуть. Ниже настройте цвет, «Непрозрачность», «Положение» и «Средняя точка» выбранной точки.
- Нажмите «Добавить слой», чтобы наложить сверху полупрозрачный слой; меняйте порядок слоёв или нажимайте «Скрыть», чтобы сравнить.
- Нажмите «Копировать» рядом с CSS или выберите «Размер PNG» и нажмите «Сохранить как PNG».
Как это работает
- Результат — одно объявление background-image; слои рисуются сверху вниз в порядке CSS. Полупрозрачные цвета записываются как rgb(r g b / a).
- Средняя точка — это подсказка перехода в CSS, которая сдвигает место, где два цвета смешиваются поровну. Повтор замощает отрезок от первой до последней точки, как repeating-linear-gradient.
- Углы и ключевые слова размера радиального градиента соответствуют CSS Images 3, а цвета смешиваются в sRGB, как браузеры делают по умолчанию. PNG рисуется в браузере по тем же правилам.
- Ваши слои и точки сохраняются в этом браузере.
Частые вопросы
- Как наложить несколько градиентов в CSS?
- Перечислите их в background-image через запятую. Первый рисуется сверху, поэтому верхним слоям нужна некоторая прозрачность. Поле CSS выдаёт именно такую запись.
- Как сделать полосатый фон?
- Включите «Повтор» и поставьте две точки одного цвета в одно положение, чтобы получить резкую границу. Готовый вариант «Полосы» — быстрый старт.
- Середина градиента выглядит грязной. Что делать?
- Включите «Средняя точка», чтобы сдвинуть место смешивания, или добавьте в середине точку нужного цвета. Дополнительные цвета при смешивании дают серый.
- Могут ли предпросмотр и PNG отличаться?
- Предпросмотр браузер рисует по CSS; PNG рассчитывается по тем же правилам. С точностью до округления они совпадают.