Как пользоваться: Генератор CSS-градиентов и теней
- 1
Выберите градиент или тень блока
Переключайтесь между двумя редакторами на вкладках над предпросмотром.
- 2
Начните с шаблона
Нажмите на плитку шаблона, чтобы загрузить его, или оставьте вариант по умолчанию и настройте его.
- 3
Настройте визуально
Перетаскивайте опорные точки цвета и задавайте угол либо добавляйте слои тени и настраивайте смещение, размытие и растяжение.
- 4
Скопируйте код
Скопируйте CSS-объявление или класс Tailwind и вставьте в свой проект.
Лимиты и Pro
Бесплатно и без регистрации: неограниченное число опорных точек и слоёв тени, 3 типа градиентов, 3 пространства смешивания цветов и 24 шаблона.
Pro убирает рекламу; оба редактора полнофункциональны на любом тарифе. Смотреть Pro
О инструменте «Генератор CSS-градиентов и теней»
Градиенты и тени — два CSS-эффекта, которые чаще всего подбирают методом проб и ошибок в инструментах разработчика браузера. Этот генератор даёт для каждого из них визуальный редактор с большим предпросмотром в реальном времени, а затем пишет точное CSS-объявление и подходящий класс Tailwind с произвольным значением, например bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]. Результат можно сразу вставить в таблицу стилей или в className.
Редактор градиентов строит линейные, радиальные и конические градиенты. Щёлкните по полосе опорных точек, чтобы добавить цвет в нужном месте, перетащите точку, чтобы сдвинуть её, или используйте стрелки для точной позиции. У каждой точки своя непрозрачность. Линейные и конические градиенты имеют угол, радиальные и конические — центр, радиальные — форму круга или эллипса, а любой градиент можно повторить, чтобы получить полосы и кольца. Ещё можно выбрать цветовое пространство для смешивания: OKLab и OKLCH избегают серой грязноватой середины, которую даёт классическое смешивание в sRGB между насыщенными цветами, и поддерживаются всеми актуальными браузерами.
Редактор теней блока накладывает столько слоёв, сколько нужно. У каждого слоя есть смещения по X и Y, размытие, растяжение, цвет с непрозрачностью, переключатель внутренней тени и переключатель видимости. Слои можно переставлять: первый рисуется сверху. Блок предпросмотра с настраиваемым размером, радиусом скругления и цветами показывает эффект на светной или тёмной поверхности.
По двенадцать шаблонов для каждого редактора — закаты, цветовые круги и полосы; уровни возвышения Material, многослойные мягкие тени, неоморфизм и жёсткие смещения — дадут отправную точку. Инструмент работает только с градиентами и тенями блока: text-shadow, filter: drop-shadow и градиенты SVG он не создаёт.
Конфиденциальность
Всё происходит на странице: цвета и настройки не покидают ваш браузер, изображения никуда не загружаются. Текущие градиент и тень сохраняются в локальном хранилище, так что при возвращении они будут на месте.
Возможности
Линейный, радиальный и конический
Перетаскиваемые опорные точки с непрозрачностью, угол, центр, форма и режим повтора.
Многослойные тени
Накладывайте, переставляйте, скрывайте слои и делайте их внутренними для реалистичной глубины.
CSS и Tailwind
Копируйте готовое объявление или класс Tailwind с произвольным значением.