Генератор тени элементов.
Бесплатный онлайн-генератор CSS-элементов с тенью, возможность реального времени предварительного просмотра.
Синтаксис CSS box-shadow
box-shadow: [inset] offset-x offset-y blur spread color. Несколько теней разделяются запятыми. Визуальный редактор позволяет настраивать значения в реальном времени.
Как использовать генератор теней
Регулируйте слайдеры: смещение X, Y, размытие, растяжение. Выберите цвет и переключите inset. CSS-код обновляется мгновенно.
▶Разница между blur и spread?
Blur — мягкость краёв тени (0 = резкий край). Spread — расширение/сжатие тени во всех направлениях.
▶Можно ли добавить несколько теней?
Да, через запятую: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);.
▶Что делает inset-тень?
Тень внутри элемента вместо внешней. Создаёт эффект вдавленности, как у текстового поля.
Если этот инструмент оказался полезным для вас, подумайте о том, чтобы подарить мне кофе.
Купите мне кофе.