Генератор теней CSS
Создавайте CSS box-shadow визуально с предварительным просмотром. Настройте смещение, размытие, распространение, цвет и прозрачность. Скопируйте CSS-код. Бесплатно, 100% в браузере.
Предпросмотр
CSS-код
Справка
Что такое CSS box-shadow?
CSS-свойство box-shadow добавляет один или несколько эффектов тени вокруг рамки элемента. Определяется смещениями относительно элемента, радиусами размытия и распространения, цветом и необязательным ключевым словом inset.
Синтаксис box-shadow
box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;
offset-x: Горизонтальное расстояние. Положительное = вправо, отрицательное = влево.
offset-y: Вертикальное расстояние. Положительное = вниз, отрицательное = вверх.
blur-radius (необязательно, по умолчанию 0): Большие значения создают более мягкую тень.
spread-radius (необязательно, по умолчанию 0): Положительные значения расширяют тень, отрицательные — сужают.
Использование нескольких слоёв тени
Комбинирование нескольких теней создаёт реалистичные эффекты глубины. Распространённая техника — сочетание плотной тёмной тени вблизи элемента с большой размытой тенью вдали.
Советы по дизайну теней
Используйте цвета rgba() или hsla() — полупрозрачные тени выглядят естественнее.
Поддерживайте единый источник света — используйте одинаковое направление смещения по всему интерфейсу.
Избегайте чистого чёрного — тёмный оттенок вашего бренд-цвета создаёт более мягкие тени.
Конфиденциальность
Вся генерация теней выполняется на 100% в вашем браузере. Данные не отправляются на сервер.