Box Shadow Generator

Об этом инструменте

Горизонталь — положительные значения смещают тень вправо, отрицательные — влево. Вертикаль — положительные вниз, отрицательные вверх. Размытие — большие значения создают мягкие, рассеянные тени. Распространение — положительные расширяют тень, отрицательные — сужают.

Включите «внутрь» для создания внутренней тени. Добавляйте несколько теней кнопкой «+ Добавить тень» — они разделяются запятыми в CSS, накладываясь от переднего к заднему.

Как использовать

1. Настройте ползунки Горизонталь и Вертикаль для смещения тени.
2. Увеличьте Размытие для мягкой тени или установите 0 для чёткой тени.
3. Используйте Распространение, чтобы расширить или сузить тень относительно элемента.
4. Нажмите «+ Добавить тень» для наложения нескольких теней и создания более богатых эффектов.

Случаи использования

Дизайнеры используют box-shadow для создания глубины и высоты в компонентах карточек. Внутренние тени создают эффект нажатой кнопки. Несколько наложенных теней создают реалистичное освещение с окружающим и направленным светом.

Частые вопросы

• Что такое опция inset? — Внутренние тени отображаются внутри границы элемента, а не снаружи. Они полезны для создания эффекта нажатия на поля ввода и кнопки.
• Можно ли добавить несколько теней? — Да. Нажмите «+ Добавить тень» для добавления ещё одного слоя тени. Все тени объединяются в одно объявление box-shadow через запятую.
• Что делает отрицательное значение распространения? — Отрицательное распространение делает тень меньше элемента. В сочетании со смещением и размытием создаётся тонкая тень, выглядывающая только с одной стороны.