Визуальный генератор CSS-теней
Тени придают интерфейсам глубину: они приподнимают карточки над страницей, показывают, какая кнопка нажата, и визуально отделяют диалоговое окно от фона. Свойство CSS box-shadow предоставляет огромные возможности, но его пять числовых значений сложно настраивать вслепую. Этот генератор предлагает удобные ползунки и предпросмотр в реальном времени, позволяет накладывать несколько теней друг на друга для естественного вида и выдает чистый CSS-код, который можно сразу скопировать в проект.
Возможности
- Смещение, размытие, растяжение, цвет и прозрачность — настройки с мгновенным предпросмотром.
- До пяти слоев, объединенных в одном свойстве
box-shadow. - Внутренние тени (inset) для эффектов нажатия и вдавленности.
- Радиус скругления углов и цвета предпросмотра для адаптации под ваш дизайн.
- Готовые пресеты для мягких, средних, жестких, многослойных, внутренних теней и эффектов свечения.
- Готовый к копированию CSS-код с цветами в формате
rgba().
Пример
Многослойная тень, которая естественно смотрится на светлом фоне:
.card {
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.07),
0px 4px 8px 0px rgba(0, 0, 0, 0.07),
0px 16px 32px 0px rgba(0, 0, 0, 0.07);
border-radius: 16px;
}
Советы по дизайну теней
| Цель | Рекомендуемые настройки |
|---|---|
| Легкая тень карточки на белом фоне | y 4, размытие 12, непрозрачность 8% |
| Парящее выпадающее меню или окно | 2–3 слоя, y до 24, размытие до 48, непрозрачность 7–12% для каждого |
| Ретро-стиль (плоская тень) | x 6, y 6, размытие 0, непрозрачность 100% |
| Эффект фокуса или свечения | x 0, y 0, размытие 16–24, растяжение 2–4, фирменный цвет |
| Нажатое поле ввода | inset, y 2, размытие 6, непрозрачность 25–30% |
Сохраняйте единый источник света: если на одном элементе тени падают вниз, они должны падать вниз везде.
Похожие инструменты
Создайте фон для карточек с помощью генератора CSS-градиентов, конвертируйте цвета между форматами HEX, RGB и HSL с помощью конвертера цветов или выберите цвет со скриншота с помощью инструмента выбора цвета на изображении.