Путь задачи / от ввода к результату
Как собрать тень box-shadow на CSS
- 01
Расположите тень
Установите «Смещение по горизонтали» и «Смещение по вертикали» — оба от -80 до 80 px. Отрицательные значения сдвигают тень влево или вверх; ноль центрирует её за карточкой. По умолчанию открываются 12 px вправо и 18 px вниз — классическое положение падающей тени.
- 02
Настройте размытие и растяжение
Настройте «Радиус размытия» от 0 до 120 px для мягкости — по умолчанию 32 px — и «Радиус растяжения» от -40 до 60 px, чтобы увеличить или уменьшить тень до применения размытия. Растяжение по умолчанию -4 px слегка стягивает тень ради более чёткого края.
- 03
Задайте цвет и непрозрачность
Выберите шестизначный «Цвет тени» — значение по умолчанию #0b0d12, почти чёрный — и установите «Непрозрачность тени» от 0 до 1 с шагом 0,01. Непрозрачность становится альфа-каналом цвета rgba() в выводе, поэтому 0,28 отрисовывается как rgba(11, 13, 18, 0.28).
- 04
Включите режим inset
Включите «Внутренняя тень», чтобы переместить тень внутрь блока, — так поверхность выглядит нажатой или утопленной, что полезно для полей ввода и переключённых кнопок. Когда переключатель включён, сгенерированное объявление начинается с ключевого слова inset.
- 05
Сравните с примером
Нажмите «Загрузить пример» ради чёткого эталонного стиля: смещение 8 px по обеим осям без размытия и растяжения, цвет #0f4cff при непрозрачности 0,35 — жёсткая смещённая обводка. «Сбросить» возвращает мягкую тень по умолчанию, а живой предпросмотр перерисовывается при каждом изменении.
- 06
Скопируйте или скачайте CSS
Нажмите «Копировать CSS», чтобы скопировать правило .shadow-card, или «Скачать .css», чтобы сохранить его как toolars-box-shadow.css. Копирование блокируется, пока любое значение вне диапазона, поэтому вставленное объявление всегда валидно.