Тени и скругления CSS
Настройте box-shadow и border-radius ползунками, проверьте на карточке и скопируйте готовый CSS.
Настройки
Настройте box-shadow и border-radius ползунками, скопируйте готовый CSS.
Тень рисуется браузером: ни картинок, ни запросов. Значения можно менять стрелками на клавиатуре.
Предпросмотр
Так тень и скругление выглядят на карточке.
CSS-код
Скопируйте и вставьте в стили. Обе строки можно использовать вместе.
Тень не должна быть единственным способом выделить важное: добавляйте границу или подпись.
Всё считается в браузере, без отправки данных.
Тень и скругление — самые частые правки в интерфейсе. Одна и та же карточка с тенью 0 4px 12px выглядит аккуратно, а с 0 20px 60px — уже как всплывающее окно. Подбирать значения в коде неудобно: сохранил, обновил, снова правишь.
Конструктор показывает результат сразу: двигайте ползунки и смотрите, как меняется карточка. Цвет тени и непрозрачность настраиваются отдельно, поэтому можно сделать мягкую подсветку вместо чёрного пятна. Скругление задаётся одним значением или четырьмя разными углами.
Готовый CSS копируется одной кнопкой — две строки, которые работают в любом проекте. Всё считается в браузере, без отправки данных и регистрации.
Как это работает
- Настройте смещение, размытие и растяжение тени ползунками.
- Добавьте скругление: одно значение на все углы или четыре разных.
- Скопируйте CSS и вставьте в стили — тень и радиус готовы.
Как подобрать тень
Начните с направления света: тень обычно падает вниз и чуть вправо. Смещение по Y в 2–3 раза больше смещения по X выглядит естественно. Размытие делайте в 2–4 раза больше смещения, а растяжение держите около нуля или слегка отрицательным — так тень не расползается.
Для карточек подойдёт мягкая тень с непрозрачностью 15–25%, для кнопок — более короткая и плотная. Внутренняя тень нужна для полей ввода и нажатых состояний: она показывает, что элемент «утоплен».
Скругление и пропорции
Радиус измеряется в пикселях, но воспринимается относительно размера блока. На маленькой кнопке 8 px — заметное скругление, на большой карточке — едва видное. Если нужен эффект «таблетки», радиус должен быть равен половине высоты элемента.
Разные углы используют для акцентов: например, скруглить только верхние углы у обложки или один угол у карточки. Не смешивайте слишком много приёмов в одном блоке — интерфейс станет шумным.
Смежные инструменты
Частые вопросы
Как работает box-shadow?
Свойство принимает смещение по X и Y, размытие, растяжение и цвет. Положительное смещение по X двигает тень вправо, по Y — вниз. Размытие делает край мягче, растяжение увеличивает или уменьшает тень без размытия. Отрицательное растяжение поджимает тень внутрь, а ключевое слово inset рисует её внутри блока.
Почему тень выглядит грязной?
Чаще всего из-за чистого чёрного цвета и большой непрозрачности. В интерфейсах тень редко бывает чёрной: возьмите цвет фона или бренда и поставьте непрозрачность 10–25%. Ещё один приём — отрицательное растяжение: тень становится компактнее и не расползается по краям.
Чем border-radius отличается от скругления в редакторе?
Это одно и то же свойство CSS. Одно значение скругляет все четыре угла одинаково, четыре значения задают радиусы по часовой стрелке: левый верхний, правый верхний, правый нижний, левый нижний. Значения можно комбинировать, чтобы получить «лист» или каплю.
Сколько теней можно повесить на элемент?
CSS допускает несколько теней через запятую: например, близкую резкую и дальнюю мягкую. Так получается объёмнее, чем одной тенью. В этом конструкторе настраивается одна тень — этого хватает для карточек и кнопок. Если нужен многослойный эффект, скопируйте строку и добавьте вторую вручную.
Тень не видна на тёмной теме. Что делать?
На тёмном фоне чёрная тень почти не читается. Используйте светлую тень с низкой непрозрачностью, добавьте тонкую границу или lighter-подсветку сверху. Проверьте результат на реальном фоне: в конструкторе карточка белая, а на сайте фон может быть другим.
Можно ли использовать тень для доступности?
Тень помогает отделить блок, но не заменяет границу, подпись или другой признак. Для людей с нарушениями зрения и на слабых экранах тень может пропасть. Важные состояния — фокус, ошибку, выбор — дублируйте контуром, текстом или иконкой, а не только тенью.