Генератор box-shadow
Создайте CSS box-shadow визуально, с поддержкой нескольких наложенных слоёв и внутренних теней (inset).
Как это работает
Каждый слой тени — это небольшой объект с горизонтальным и вертикальным смещением, размытием, растяжением, цветом, прозрачностью и флагом «внутренняя тень». Поскольку HTML-поля выбора цвета не поддерживают прозрачность, шестнадцатеричное значение разбивается на компоненты red, green, blue и объединяется с ползунком прозрачности в цвет rgba(). Все слои соединяются запятыми в одно объявление box-shadow, и та же строка применяется к элементу предпросмотра — то есть то, что вы видите, вы и копируете. Порядок важен: первая тень в списке рисуется поверх остальных.
Одна-единственная тень почти всегда выглядит искусственно. У настоящих теней плотное ядро и мягкое, широкое затухание, и что-то вроде 0 4px 12px rgba(0,0,0,0.25) не может дать оба эффекта одновременно. Приём, которым пользуется любая продуманная дизайн-система, — накладывать две-три тени с низкой прозрачностью: узкую 0 1px 2px с непрозрачностью 10% и широкую 0 8px 24px с непрозрачностью 8%. Каждый слой сам по себе почти незаметен, но вместе они создают настоящее ощущение глубины.
Всё это работает в JavaScript этой страницы: ни один выбранный цвет и ни один сгенерированный CSS никуда не отправляется, что подтверждает вкладка «Сеть» инструментов разработчика во время работы.
Частые вопросы
Что делает «Inset»?
Переносит тень с внешней стороны блока внутрь, создавая эффект вдавленности вместо парения над поверхностью.
Могу ли я накладывать несколько теней?
Да, нажмите «Добавить слой тени», чтобы наложить друг на друга ещё тени. CSS box-shadow нативно поддерживает это через значения, разделённые запятыми. Если сочетать мягкую большую тень с более резкой, тёмной и узкой, часто получается более реалистичный эффект глубины.
Отправляется ли это куда-либо?
Нет, предпросмотр и CSS создаются полностью в вашем браузере. Ничего не загружается.