Utilore

Генератор теней CSS

Двигайте ползунки — образец меняется вместе с ними. Складывайте слои, когда одной тени мало: именно так получается мягкая, правдоподобная глубина живых интерфейсов.

Слои

Заготовки

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

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

Полезно знать

Почему у тени текста настроек меньше

Свойство text-shadow принимает только сдвиг, размытие и цвет. Растяжение и внутренний режим есть лишь у box-shadow, и одно лишнее значение делает всё объявление недействительным: браузер молча его отбрасывает, и тень просто исчезает. Поэтому при переходе в режим текста эти два ползунка прячутся, а не остаются в надежде, что их не заметят.

Несколько бледных слоёв лучше одного тяжёлого

Настоящая тень неоднородна: у самого предмета она плотная и растворяется по мере удаления. Одна тень с большим размытием даёт серый ореол, а два-три слоя с разными сдвигами и низкой непрозрачностью — ту самую глубину, что видна в аккуратных интерфейсах. Тулза держит каждый слой отдельно, а в скопированной строке они перечислены по порядку.

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

Зачем нужно растяжение?

Оно увеличивает или уменьшает тень до того, как применится размытие. Отрицательное значение подбирает тень внутрь, и она не выглядывает по бокам — на этом и держатся опрятные тени карточек, где свечение должно оставаться под блоком, а не вокруг него.

Как сделать внутреннюю тень?

Поставьте флажок «Внутренняя тень» — в начале строки появится inset, и тень уйдёт внутрь блока. Так делают нажатые кнопки и поля ввода, где глубина должна читаться как вдавленность, а не как приподнятость.

Почему тень не видно?

Чаще всего непрозрачность стоит в нуле или сдвиг и размытие оба нулевые — тогда тень прячется ровно за блоком. Она пропадает и в случае, когда у родителя стоит overflow: hidden, а тень выходит за видимую область.

Во всех ли браузерах это работает?

Да. И box-shadow, и text-shadow стали стандартом много лет назад и не требуют префиксов; значения отсюда — обычный CSS без вендорных добавок.

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