Генератор CSS теней и градиентов
Создавайте box-shadow и градиенты визуально. Добавляйте несколько слоёв тени, у каждого свои смещения, размытие, растяжение, цвет и переключатель inset. Для градиентов выбирайте линейный, радиальный или конический тип и добавляйте сколько угодно цветовых точек. Живой предпросмотр обновляется по мере настройки.
Как пользоваться
Выберите тени или градиенты
Переключитесь между вкладками «Тени» и «Градиенты».
Настройте параметры
Смещения, размытие, растяжение, цвета, прозрачность, угол и цветовые точки градиента.
Смотрите превью
Живой предпросмотр обновляется по мере изменения каждого параметра.
Скопируйте CSS
Кнопка «Копировать» кладёт CSS в буфер обмена.
Возможности
Редактор box-shadow
Несколько слоёв тени, у каждого свои смещения, размытие, растяжение, цвет и переключатель inset.
Три типа градиентов
Линейный, радиальный и конический — с углом для линейного и конического.
Неограниченное число точек
Добавляйте сколько угодно цветовых точек с позицией от 0% до 100%.
Живой предпросмотр
Результат виден на демо-фигуре по мере настройки.
Типичные сценарии
- Сделать мягкую тень для карточки
- Построить красочный градиент для hero-секции
- Создать слоистую тень для кнопки
- Прототипировать CSS-эффекты перед написанием кода