ToolsMaxxing
Русский
EnglishEspañolPortuguêsBahasa Indonesiaहिन्दीবাংলাРусскийTiếng ViệtFrançaisDeutschTürkçeالعربية

Генератор CSS box-shadow

Настройте тень ползунками, наложите несколько слоёв и скопируйте CSS.

Тень 1

Ваши файлы остаются на устройстве

Как это работает

  1. 1Двигайте ползунки смещения, размытия и растяжения.
  2. 2Выберите цвет и прозрачность. Отметьте Inset для внутренней тени.
  3. 3Добавьте слои, чтобы получить более мягкую и естественную тень.
  4. 4Скопируйте CSS.

Что делают параметры

Смещение
Расстояние тени от блока по горизонтали и вертикали. Отрицательные значения сдвигают влево и вверх.
Размытие
Насколько мягок край. Ноль даёт чёткий край.
Растяжение
Увеличивает или уменьшает тень до размытия. Отрицательное растяжение не даёт сильному размытию вылезать по сторонам.
Inset (внутренняя)
Рисует тень внутри блока, как у вдавленного поля.
Слои
Несколько теней рисуются вместе. Два-три тонких слоя выглядят естественнее одной тяжёлой тени.

Конфиденциальность

Всё выполняется в вашем браузере. Введённые данные не отправляются на сервер.

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

Зачем нужно больше одного слоя тени?

Настоящие тени резкие рядом с предметом и мягкие вдали. Небольшая плотная тень плюс большая мягкая имитируют это и выглядят изящнее одного размытия.

Повторяет ли box-shadow скруглённые углы?

Да, он следует за border-radius элемента. Ползунок радиуса показывает это и входит в скопированный CSS.

Замедлит ли страницу сильное размытие?

Несколько статичных теней не проблема. Много крупных размытых теней или их анимация могут нагружать слабые телефоны. Лучше анимируйте прозрачность псевдоэлемента.

Чем это отличается от drop-shadow()?

box-shadow следует прямоугольному блоку. Фильтр drop-shadow() следует видимой форме, включая прозрачные края PNG и SVG.

Можно ли использовать результат в Tailwind и других инструментах?

Значение после box-shadow: это обычный CSS. В Tailwind поместите его в произвольное значение, заменив пробелы подчёркиваниями.

Похожие инструменты