Генератор CSS box-shadow с превью карточек | We.Inc
Создавайте многослойные CSS-тени и смотрите на них на настоящих карточках услуг и тарифов, на светлом и тёмном фоне, с видимым состоянием фокуса. Скопируйте CSS и готовый компонент карточки.
Тени трудно оценить на сером квадрате. Здесь вы настраиваете многослойный box-shadow и видите его на карточке услуги и на карточке тарифа, на светлой или тёмной странице, с кольцом фокуса клавиатуры, которое можно проверить клавишей Tab. Скопируйте CSS или весь компонент карточки, когда результат вас устроит. Всё считается в вашем браузере. Ничего из того, что вы вводите, не отправляется в We.Inc или кому-либо ещё, и всё исчезает при закрытии вкладки.
Начните с готового пресета или настройте первый слой: смещение по горизонтали и вертикали, размытие, растяжение, цвет, прозрачность и inset.
Добавьте до пяти слоёв. Многослойные тени (одна плотная плюс одна широкая мягкая) выглядят естественнее, чем одна большая тень.
Переключайте превью между светлой и тёмной страницей. Нажмите Tab, чтобы перевести фокус на кнопки карточки, и проверьте, что кольцо фокуса остаётся видимым.
Проверки предупреждают, когда тень слишком слабая, чтобы её увидеть на выбранном фоне, и когда текст карточки не проходит по контрасту WCAG AA.
Скопируйте объявление box-shadow или весь компонент карточки с HTML и CSS.
На тёмном фоне тени почти исчезают. Используйте чуть более светлый цвет карточки или тонкую границу, чтобы отделить карточку по-другому.
Делайте цвет тени с оттенком в сторону фона, а не чисто чёрным — так выглядит мягче.
Никогда не полагайтесь только на тень для показа фокуса. Используйте также чёткий контур.
Большие значения размытия дороже в отрисовке. Избегайте их анимации на длинных списках.
Используйте один-два уровня теней на весь сайт, чтобы глубина что-то значила.
Частые вопросы
Как работает свойство CSS box-shadow?
box-shadow принимает горизонтальное смещение, вертикальное смещение, необязательный радиус размытия, необязательное растяжение и цвет, плюс ключевое слово inset для внутренних теней. Можно перечислить несколько теней через запятую; первая рисуется сверху.
Почему многослойные тени выглядят лучше?
Реальные объекты отбрасывают резкую тень рядом с собой и мягкую широкую — дальше. Два-три слоя с растущим размытием и падающей прозрачностью имитируют это.
Почему моя тень не видна на тёмном фоне?
Тёмная тень на тёмной странице почти не даёт контраста. Инструмент предупреждает об этом. Вместо тени приподнимите карточку более светлым цветом поверхности или тонкой границей.
Влияет ли box-shadow на доступность?
Тени — это украшение, поэтому сами по себе они не обязаны соответствовать правилам контраста. Важно, чтобы текст на карточке оставался читаемым и чтобы фокус показывался видимым контуром, а не только изменением тени.
Генератор CSS-теней бесплатный?
Да, без регистрации. Копируйте код в любой проект.
Проверяйте тени на тех компонентах, которые пойдут в продакшен
Тень, которая выглядит правильно на одиноком квадрате, может смотреться тяжело на ряду карточек тарифов или пропасть под фотографией. Превью на карточках, которые реально использует сайт малого бизнеса — карточка услуги с иконкой и выделенный тариф, — показывает тот результат, который вы получите.
Код компонента включает контур focus-visible, поэтому карточка остаётся удобной при работе с клавиатуры независимо от выбранной тени.