Генератор CSS box-shadow
Визуальный инструмент для создания теней в CSS. Настраивайте смещение, размытие, расширение, цвет и прозрачность. Поддержка множественных слоёв, inset-теней и готовых пресетов. Копируйте CSS в один клик.
Что такое box-shadow в CSS?
Свойство box-shadow добавляет одну или несколько теней к элементу HTML. Тени создают эффект глубины и объёма, помогая визуально отделить элементы интерфейса друг от друга. Это один из самых мощных инструментов для создания современного цветового дизайна без использования изображений.
Синтаксис свойства: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. Каждый параметр влияет на определённый аспект тени — от направления до размытия и размера.
Offset X и Offset Y
Горизонтальное и вертикальное смещение тени относительно элемента. Положительные значения сдвигают тень вправо и вниз, отрицательные — влево и вверх.
Blur Radius
Радиус размытия тени. Чем больше значение, тем мягче и шире тень. При значении 0 тень получается чёткой и резкой — как у вырезанного элемента.
Spread Radius
Расширение или сжатие тени. Положительные значения увеличивают тень со всех сторон, отрицательные — уменьшают. Полезен для создания тонких подложек и бордюров.
Inset
Ключевое слово inset делает тень внутренней — она рисуется внутри элемента, а не снаружи. Используется для создания вдавленных кнопок и input-полей.
Где применяется box-shadow
Тени — универсальный инструмент дизайна, который используется в самых разных сценариях современной веб-разработки.
Карточки и контейнеры
Тени создают визуальную иерархию, отделяя карточки товаров, постов и информационных блоков от фона. Material Design использует разные уровни elevation для разных типов контента.
Кнопки и элементы управления
Тени делают кнопки «кликабельными» — выпуклыми и интерактивными. При нажатии тень уменьшается или переходит в inset, создавая ощущение вдавливания.
Модальные окна и попапы
Глубокие тени вокруг модальных окон визуально «поднимают» их над основным контентом, фокусируя внимание пользователя на диалоге.
Навигация и хедеры
Фиксированная шапка сайта с тенью внизу создаёт чёткую границу между навигацией и контентом без видимой линии border.
Neumorphism / Soft UI
Стиль neumorphism использует две тени — светлую и тёмную — для создания эффекта мягко выдавленных элементов из фона. Наш генератор поддерживает этот стиль.
Свечение (Glow)
Цветные тени с нулевым offset создают эффект свечения вокруг элемента. Отлично работают для CTA-кнопок, иконок и фокусных состояний в тёмных темах.
Синтаксис и паттерны
Разберём основные конструкции box-shadow — от простейшей тени до сложных многослойных эффектов, которые используются в профессиональных дизайн-системах.
Базовая тень
Минимальная тень — два обязательных значения (offset-x, offset-y) и опциональные blur, spread, color.
box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.15);Множественные тени
Перечислите несколько теней через запятую. Первая тень рисуется поверх остальных. Это ключ к реалистичным эффектам.
box-shadow:
0 1px 2px rgba(0,0,0,0.07),
0 2px 4px rgba(0,0,0,0.07),
0 4px 8px rgba(0,0,0,0.07),
0 8px 16px rgba(0,0,0,0.07);Inset (внутренняя тень)
Ключевое слово inset рисует тень внутри элемента. Используется для input-полей, вдавленных кнопок и стиля Neumorphism.
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);Neumorphism (Soft UI)
Две тени — тёмная и светлая — на фоне среднего тона создают эффект мягкой выпуклости.
box-shadow:
6px 6px 12px #b8c0cc,
-6px -6px 12px #ffffff;Elevation в Material Design
Google Material Design определяет пять уровней возвышения (elevation) для создания визуальной иерархии. Каждый уровень использует несколько слоёв теней для достижения реалистичного эффекта глубины. Наш генератор включает готовые пресеты для каждого уровня.
Карточки, кнопки в покое
Hover-состояние кнопок
Навигация, FAB
Меню, дропдауны
Модальные окна, диалоги
Советы по работе с тенями
Профессиональные рекомендации, которые помогут создавать красивые и производительные тени в ваших проектах.
1Используйте несколько слоёв
Одна тень часто выглядит грубо. Несколько тонких слоёв с разными blur и offset создают натуральный вид, имитируя поведение света в реальном мире. Начните с 2-4 слоёв с нарастающим blur.
2Не используйте чёрный цвет
Чистый чёрный (#000000) для теней выглядит неестественно. Используйте тёмно-серые оттенки (rgba(0,0,0,0.1-0.25)) или цветные тени, подобранные под общую палитру интерфейса. Цветные тени выглядят более органично.
3Помните о производительности
Box-shadow не запускает reflow (в отличие от border), но большой blur требует GPU-ресурсов. Для анимаций hover предпочтительнее менять opacity pseudo-элемента с тенью, чем анимировать саму тень.
4Учитывайте тёмную тему
На тёмном фоне стандартные тени не видны. Для тёмных тем используйте более интенсивные тени (opacity 0.4-0.8), цветные glow-эффекты или светлые тени с малой opacity для создания мягкого свечения.
Как пользоваться генератором
Пошаговая инструкция для создания идеальной тени за несколько секунд.
Настройте слайдеры
Двигайте ползунки Offset X, Offset Y, Blur и Spread, чтобы задать форму тени. Результат отображается в реальном времени на превью-блоке.
Выберите цвет и прозрачность
Кликните на палитру цвета или используйте быстрые цвета. Настройте alpha-канал для нужной интенсивности тени.
Добавьте слои
Нажмите «Добавить» для новых слоёв тени. Комбинируйте внешние и inset-тени для сложных эффектов. Переключайтесь между слоями вкладками.
Скопируйте CSS
Нажмите «Копировать» для получения box-shadow кода или «Полный CSS» для получения полного набора свойств с border-radius и background.
Часто задаваемые вопросы
Был ли этот калькулятор полезен?
Инструмент справочный — не заменяет эксперта
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Профессиональные решения — медицинские, финансовые, инженерные — должны приниматься только после консультации с квалифицированным специалистом. Не используйте автоматический расчёт как единственное основание для важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут ответственности за прямой или косвенный ущерб, возникший из-за использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию результатов.
Похожие калькуляторы
Проверка контрастности WCAG
Контрастность цветов по WCAG 2.1 (AA и AAA). Доступность сайта для людей с нарушениями зрения.
/wcag-contrast-checkerКалькулятор конвертации форматов файлов
Изменение размера при конвертации: BMP vs JPG, WAV vs MP3, RAW vs MP4. Lossless и Lossy сжатие.
/file-conversion-calculatorКонвертер систем счисления (Bin/Oct/Dec/Hex)
Перевод чисел между двоичной, восьмеричной, десятичной и шестнадцатеричной системами. Для программистов.
/number-system-converterГенератор UUID v4 онлайн
Генерация UUID v4. Один или сотни уникальных идентификаторов за секунду. Разные форматы.
/uuid-generatorСчётчик символов и слов онлайн
Символы с пробелами и без, слова, предложения, время чтения. Для SEO, соцсетей и копирайтинга.
/character-counterКалькулятор A/B теста
Статистическая значимость A/B теста. Размер выборки, p-value, доверительный интервал и мощность теста.
/ab-test-calculatorГенератор Cubic Bezier (CSS transition)
Интерактивный генератор кривых Безье для CSS анимаций. Визуальная настройка плавности переходов, пресеты (ease, linear) и копирование кода.
/cubic-bezierКалькулятор градиентов и интерполяции цветов
Генератор плавных переходов между цветами. Создайте CSS градиент онлайн, получите коды цветов (HEX/RGB) и настройте количество шагов.
/color-gradientКалькулятор контрастности (WCAG), шрифтов и сетки
Инструменты UI/UX дизайнера. Проверка контрастности цветов (WCAG AA/AAA), расчет модульной сетки и подбор типографической шкалы.
/contrast-gridКалькулятор Responsive Margin/Padding (Clamp generator)
Генератор CSS функции clamp() для адаптивных отступов и шрифтов. Создайте отзывчивый дизайн (fluid spacing) от мобильных до десктопа онлайн.
/responsive-helperКалькулятор CSS единиц (PX, REM, EM, %)
Конвертер пикселей в rem/em и генератор calc(). Удобный инструмент для верстки и адаптивного дизайна.
/css-unit-converterГенератор цветовых палитр
Подбор гармоничных цветовых сочетаний: комплементарные, аналогичные, триадные. Экспорт в CSS, Tailwind, SCSS.
/generator-cvetovyh-palitrГенератор favicon из текста
Создание иконки сайта (favicon) из буквы, эмодзи или символа. Генерация ICO, PNG, SVG для всех устройств с готовым HTML-кодом.
/generator-faviconКалькулятор золотого сечения
Пропорции золотого сечения (phi = 1.618). Для дизайна, архитектуры, фотографии. Прямоугольник и спираль.
/golden-ratio-calculatorКалькулятор теории цвета: гармония, конвертер, палитры, смешивание, дальтонизм
Комплексный инструмент для работы с цветом: цветовые гармонии (комплементарная, аналогичная, триадная, тетрадная), конвертер HEX/RGB/HSL/HSV/CMYK, генератор палитр (монохроматическая, shades, tints, tones), смешивание цветов (аддитивное/субтрактивное), симулятор дальтонизма и анализ цветовой температуры.
/color-theory-calculator