Создайте тень CSS по смещению, размытию, растяжению и цвету. Меняйте параметры по одному, чтобы подобрать оформление карточки или кнопки.
Как пользоваться
Укажите смещение по горизонтали и вертикали, затем размытие, растяжение и цвет. Получите результат и вставьте декларацию в правило CSS.
Пример
Смещение 0 по горизонтали, 4 по вертикали, размытие 12 и растяжение 0 дают мягкую тень под элементом.
Вопросы и ответы
Что меняет размер тени?
Растяжение увеличивает или уменьшает форму, а размытие смягчает край. Отрицательные смещения двигают тень влево или вверх.
Связанные инструменты
Практическая задача
Настраивайте тень от формы к мягкости. Сначала поставьте нулевое размытие и найдите смещения, затем смягчите края. Проверьте цвет на реальном фоне карточки.
Дополнительный вопрос
Тень создаёт место вокруг карточки?
Нет. Она меняет отрисовку, а не поток документа. Для расстояния между элементами нужны поля и промежутки макета.
Настройки и форматы
| Поле | Значения |
|---|---|
| Горизонтальное смещение | Начальное значение: 0 |
| Вертикальное смещение | Начальное значение: 4 |
| Размытие | Начальное значение: 12; границы: 0 / … |
| Расширение | Начальное значение: 0 |
| Цвет | Начальное значение: #333333 |
Детали для проверки результата
| Деталь | Пояснение |
|---|---|
| Каскад CSS | Один селектор может повторяться намеренно. Результат зависит от порядка, специфичности, медиазапросов и наследования. Короткая и аккуратная таблица стилей всё равно требует проверки на странице. |
| Контраст цветов | Для читаемого текста нужен достаточный контраст переднего плана и фона. Красивые цвета не гарантируют доступность. Проверяйте размер, насыщенность шрифта и реальный фон вместе. |
| Каналы RGB | RGB описывает красный, зелёный и синий каналы света. В целочисленной форме каждый принимает значение от 0 до 255. Шесть цифр HEX записывают те же каналы по две цифры на канал. |
| Значения HSL | HSL разделяет оттенок, насыщенность и светлоту. Это удобно для вариантов одного цвета, но процент светлоты не равен воспринимаемому контрасту и не подтверждает доступность. |
| Прозрачность и фон | Полупрозрачный цвет смешивается с фоном. Одно значение выглядит по разному на белом, чёрном и изображении. Оценивайте конечное сочетание, а не отдельный передний цвет. |
| Границы предпросмотра | Ограниченный просмотр блокирует скрипты, внешние изображения, шрифты и другие ресурсы. Поэтому он отделён от активного поведения страницы, но не воспроизводит любой рабочий макет точно. |
| Пиксели и текст | Изображение хранит пиксели, а не текстовый документ для поиска. Картинку сложнее искать, выделять, переводить и читать вспомогательными средствами. Для важных сведений сохраните текстовую альтернативу. |