Toolipedia Встроить
RU
← Все инструменты для текста

Генератор шкалы теней

Создайте набор согласованных теней блоков (уровни возвышения) в виде переменных CSS.

  • Бесплатно
  • Без регистрации
  • Работает на любом устройстве

Около Генератор шкалы теней

Дизайн-системы используют набор уровней возвышения, а не случайные тени. Этот инструмент создаёт согласованные значения box-shadow от малых до больших с единым углом, ростом размытия и прозрачностью и выводит их как пользовательские свойства CSS вроде --shadow-sm и --shadow-lg, чтобы карточки, меню и модальные окна выглядели единообразно.

Как пользоваться инструментом «Генератор шкалы теней»

  1. Выберите цвет тени, базовую силу и число уровней.
  2. Просмотрите уровни возвышения на образцах карточек.
  3. Скопируйте переменные CSS в свою таблицу стилей.

Чем полезен этот инструмент?

Другие названия

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

Зачем использовать многослойные тени вместо одной?

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

Сколько уровней тени мне нужно?

Большинство интерфейсов хорошо работает с четырьмя–шестью уровнями, от малого для кнопок до большого для диалогов. Больше этого людям трудно различать.

Какого цвета должны быть тени?

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

Инструмент «Генератор шкалы теней» бесплатный?

Да. Инструмент «Генератор шкалы теней» на Toolipedia бесплатный: без регистрации и водяных знаков.

Это безопасно?

Да. Все вычисления выполняются в браузере, и ничего из введённого не отправляется на наш сервер.

Работает ли это на телефоне?

Да. Работает в любом современном браузере на Android и iPhone, а также на планшетах и компьютерах. Ничего не нужно устанавливать.

Нужна ли учётная запись?

Нет. Просто откройте страницу и пользуйтесь. Ни регистрации, ни электронной почты не нужно.

Можно ли разместить Генератор шкалы теней на моём сайте?

Да. Нажмите кнопку «Встроить на свой сайт» под инструментом, чтобы скопировать короткий фрагмент кода и вставить его на страницу. Это бесплатно, аккаунт не нужен, и инструмент продолжает работать внутри вашей страницы.

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