Генератор box-shadow CSS
Создавайте CSS-тени (box-shadow) с живым предпросмотром: смещение, размытие, растяжение, цвет, прозрачность, несколько слоёв и готовые шаблоны.
Как пользоватьсяГенератор CSS-тени
Доступно на: 
Генератор box-shadow CSS: для чего нужен
Настраивайте смещение, размытие, растяжение, цвет и прозрачность тени и сразу видьте результат. Комбинируйте несколько слоёв для реалистичных теней и используйте внутреннюю тень (inset).
Есть готовые шаблоны: мягкая многослойная, Material, парящая, контур, неоморфизм и неон. CSS-код готов к копированию, уже с border-radius.
Как пользоваться
- Выберите шаблон или начните с нуля.
- Настройте слои и цвета.
- Скопируйте CSS.
Когда использовать
- Придать глубину карточкам и кнопкам.
- Создавать эффекты неоморфизма и неона.
- Изучить, как работает box-shadow.
Частые вопросы
Как сделать мягкую и реалистичную тень?
Используйте несколько слоёв с малой непрозрачностью: один короткий и чёткий, другой длинный и размытый. Шаблон «Мягкая многослойная» делает именно это.
Что такое внутренняя тень (inset)?
Это тень, нарисованная внутри элемента, создающая впечатление, что он утоплен. Отметьте опцию «Внутренняя» у слоя.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.