CSS Gradient Generator
Create CSS gradients
Create CSS gradients Запускается локально в вашем браузере
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
About the
Генератор градиентов CSS создает настоящий линейный или радиальный градиент из двух цветов и угла, показывает его в полном размере и передает вам CSS. Угол — это та часть, которую люди неправильно понимают: в CSS 0 градусов указывает вверх, а направление вращается по часовой стрелке, поэтому 90 градусов идут слева направо, а 180 градусов — сверху вниз. Из-за этой ошибки градиент часто с первого раза выглядит перевернутым. Оба цвета могут иметь восьмизначное значение альфа, которое позволяет затемнить градиент на главном изображении.
Where people use the
- Создание фона героя, плавно переходящего между двумя фирменными цветами.
- Проверка того, какой угол выглядит правильно, прежде чем зафиксировать его в коде.
- Создание тонкого вертикального градиента для карточки или кнопки.
- Создание полупрозрачного наложения, затемняющего фотографию.
How to use the
- 1
Выберите начальный и конечный цвета
Используйте палитру цветов или введите шестнадцатеричное значение. Предварительный просмотр и CSS обновляются по мере их изменения.
- 2
Выберите линейный или радиальный
Линейная проходит поперек коробки под выбранным углом. Радиальная распространяется наружу от центра в виде круга.
- 3
Установите угол
Перетащите ползунок от 0 до 360 градусов. Помните: 0 градусов вверх, 90 градусов вправо, 180 градусов вниз, 270 градусов влево.
- 4
Скопируйте CSS
Правило представляет собой объявление фона, которое вы можете вставить прямо в таблицу стилей или, если хотите, в свойство фонового изображения.
Советы и лучшие практики
- Предпочитайте небольшую разницу в яркости для фона, содержащего текст; это воспринимается как текстура, а не как отвлечение.
- Для текста поверх градиента проверяйте контрастность в самых светлых и самых темных точках, а не только в среднем.
- Сохраняйте градиенты до двух или трех остановок; больше имеет тенденцию выглядеть грязным.
Часто задаваемые вопросы
В какую сторону указывает угол?
Ноль градусов указывает на верхнюю часть элемента, а угол увеличивается по часовой стрелке. Итак, 90 градусов идет вправо, а 180 градусов идет вниз. Это противоречит здравому смыслу, если вы привыкли считать углы, измеряемые против часовой стрелки справа.
Почему мой градиент выглядит полосатым?
Потому что два близких по яркости цвета создают видимые ступеньки на 8-битном дисплее, особенно на большой площади. Добавление тонкой третьей ступени или использование немного более широкого диапазона яркости обычно скрывает это.
Могу ли я использовать прозрачность?
Да. Используйте восьмизначное шестнадцатеричное значение, например 667eea00 для полной прозрачности или 667eea80 для половины, и градиент будет исчезать по всему, что находится за ним.
Везде ли поддерживается градиент?
Линейные и радиальные градиенты поддерживаются во всех современных браузерах без префикса. Префиксы поставщиков необходимы только для очень старых версий Safari и Android, что на практике означает, что ничего не создано после 2015 года.
Почему мой градиент не отображается?
Потому что элемент не имеет высоты. Градиент рисуется в поле элемента, поэтому пустой элемент div сворачивается до нулевой высоты и ничего не показывает. Установите высоту или добавьте контент.
Генерирует ли он более двух цветовых остановок?
Нет, этот инструмент справляется с двумя. Для градиента с несколькими стопами возьмите созданный им CSS и добавьте стопы вручную; синтаксис — это просто несколько пар цветов и процентов, разделенных запятыми.