Бесплатный онлайн генератор CSS box-shadow. Настройка смещения, размытия, распространения, цвета с предпросмотром. Копирование кода. Обработка в браузере.
Нажмите Ctrl+D, чтобы добавить страницу в закладки
Генератор CSS Box Shadow — это бесплатный онлайн-инструмент, который визуально редактирует свойство box-shadow.
Да, вы можете добавлять несколько теней для создания сложной глубины и эффектов. Каждую тень можно настраивать индивидуально.
Тень inset появляется внутри элемента, а не снаружи. В то время как обычный box-shadow появляется снаружи, добавление inset создаёт эффект углубления, вдавленности.
Настоящие тени не чёрные: это затемнённый цвет фона, и к краям они смягчаются. Вместо одной тяжёлой тени с 30% чёрного сложите два-три очень бледных слоя с разным радиусом размытия — скажем, 1 px вплотную к краю, 8 px позади и совсем лёгкую 24 px дальше. Считайте, что свет идёт сверху: задавайте только вертикальное смещение, а горизонтальное оставьте нулевым.
В статичной вёрстке издержки ничтожны, но всё меняется, как только появляется анимация. Плавное изменение значения box-shadow при наведении заставляет браузер пересчитывать размытие каждый кадр, и на слабых устройствах это заметно дёргается. Если тень должна разрастаться при взаимодействии, анимируйте вместо этого прозрачность или transform заранее отрисованного слоя тени — получится куда плавнее.