Генератор CSS Box Shadow
Создавайте многослойные CSS-тени с живыми ползунками для смещения, размытия, распространения, цвета, прозрачности и вставки — предпросмотр на реальном элементе и мгновенное копирование готового CSS.
box-shadow: —;
Всё обновляется в реальном времени в вашем браузере — без загрузок, без регистрации, полностью бесплатно.
О Генератор CSS Box Shadow
Генератор CSS Box Shadow позволяет визуально проектировать тени вместо угадывания значений в коде. Двигайте ползунки горизонтального и вертикального смещения, радиуса размытия, радиуса растяжения, цвета и прозрачности — с переключателем внутренней тени — и наблюдайте, как реальный элемент обновляется вживую. Когда результат вас устроит, скопируйте готовый к вставке CSS в один клик.
Современные тени в интерфейсах редко бывают одним слоем. Этот генератор поддерживает наложение нескольких слоёв теней: добавляйте, дублируйте, скрывайте или удаляйте слои, просматривайте либо выбранный слой отдельно, либо все слои вместе. Наложение узкой тёмной тени под мягкой широкой — вот как карточки и кнопки получают свою глубину.
Вы также можете стилизовать сам элемент предпросмотра — цвет блока, радиус скругления и фон холста, — чтобы оценивать тень в реалистичном контексте, включая тёмные поверхности. Начните с готового пресета, нажмите "Рандомизировать слой" для вдохновения и сбрасывайте настройки, когда нужен чистый лист. Всё работает в вашем браузере.
Как использовать Генератор CSS Box Shadow
- Настройте ползунки горизонтального смещения, вертикального смещения, размытия, растяжения, цвета и прозрачности, и включите "Внутренняя тень", если нужна тень внутри элемента.
- Нажмите "Добавить слой" или "Дублировать слой", чтобы наложить тени, и переключайте режим предпросмотра между "Этот слой" и "Все слои" для тонкой настройки каждого из них.
- Настройте элемент и холст — цвет блока, радиус скругления и фон, — чтобы предпросмотр соответствовал вашему реальному дизайну.
- Примените пресет или используйте "Рандомизировать слой", если вам нужна отправная точка вместо пустого набора ползунков.
- Скопируйте полное CSS-правило (или только значение) и вставьте его в свою таблицу стилей.