Генератор CSS-градиентов
Соберите градиент наглядно и скопируйте CSS.
- Работает в вашем браузере — текст никуда не отправляется
- Без регистрации и квот, пользуйтесь бесплатно сколько угодно
Как это работает
Градиенты в CSS записываются одним объявлением, синтаксис которого легко запомнить неверно, особенно соглашение об угле и расположение цветовых остановок. Смотреть на результат во время настройки быстрее, чем перезагружать страницу для проверки.
Соглашение об угле сбивает с толку
В CSS 0 градусов направлены вверх, а угол растёт по часовой стрелке, поэтому 90 градусов идут слева направо, а 180 — сверху вниз. Это отличается от математического соглашения и от нескольких инструментов дизайна, поэтому градиент, скопированный откуда-то, часто оказывается повёрнутым.
Три типа
Линейный идёт по прямой и подходит почти для любого реального случая. Радиальный расходится от точки, что подходит для свечения и световых пятен. Конический разворачивается вокруг центра, и из него строят круговые диаграммы и цветовые круги.
Градиент — это изображение, а не цвет
Это вторая вещь, на которой спотыкаются. CSS считает градиент фоновым изображением, поэтому он работает в background и background-image, но не в color, border-color и других свойствах, ожидающих обычный цвет. Для градиента на тексте нужен background-clip — это отдельный приём.
Добавление среднего цвета
Две остановки дают чистый переход. Третья позволяет провести переход через другой оттенок, что избавляет от мутного серого, который появляется при прямом смешении двух противоположных цветов.
Генератор CSS-градиентов: вопросы
В какую сторону направлен угол?
0 градусов направлены вверх, а углы растут по часовой стрелке, поэтому 90 градусов — слева направо.
Почему мой градиент не работает на тексте?
Градиент — это фоновое изображение, а не цвет. Для градиента на тексте отдельным шагом нужен background-clip.
Когда использовать радиальный или конический?
Радиальный — для свечения и световых пятен, конический — для эффектов круговых диаграмм и цветовых кругов. Линейный подходит для большинства остальных случаев.