Результаты предоставляются исключительно в информационных целях и могут содержать ошибки. Проверяйте важную информацию самостоятельно. Использование этого инструмента осуществляется на ваш страх и риск.
Что делает этот инструмент
Генератор теней CSS собирает box-shadow с ползунками для горизонтального и вертикального смещения, размытия, растяжения, цвета и непрозрачности. Превью обновляется, пока вы двигаете ползунки, а итоговую строку можно сразу скопировать. По умолчанию задана мягкая тень: 10px ниже блока, размытие 20px, чёрный цвет с непрозрачностью 25%.
Четыре длины записываются в порядке CSS: смещение по x, смещение по y, радиус размытия, радиус растяжения. Положительные смещения сдвигают тень вправо и вниз, отрицательные — влево и вверх. Размытие смягчает край, а растяжение увеличивает или уменьшает тень до размытия. Цвет записывается как rgba(), так что непрозрачность уже встроена и тень естественно смешивается с любым фоном.
Когда использовать
- Нужно придать глубину карточкам, модальным окнам и выпадающим спискам во flat-дизайне.
- Нужно воспроизвести уровни elevation дизайн-системы, например Material Design.
- Нужно добавить кнопкам едва заметный эффект фокуса или наведения.
- Нужно создать цветное свечение: нулевое смещение и яркий цвет.
Пример
Ввод
X 0, Y 10, размытие 20, растяжение 0, цвет #000000, непрозрачность 25%Вывод
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);Вопросы об этом инструменте
Как сделать внутреннюю тень?
Добавьте ключевое слово inset в начало значения: box-shadow: inset 0px 2px 6px 0px rgba(0, 0, 0, 0.25);. Тогда тень рисуется внутри блока — это подходит для нажатых кнопок и полей ввода.
Можно ли объединить несколько теней?
Да, перечислите их через запятую. Для реалистичной «высоты» часто используют две: маленькую резкую тень для края и большую мягкую для глубины, например 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.12).
Почему на цветном фоне тень выглядит серой и грязной?
Чистый чёрный с низкой непрозрачностью обесцвечивает цвета под ним. Для более чистого результата берите вместо чёрного более тёмный оттенок цвета фона.
Замедляют ли тени страницу?
Статичные тени обходятся дёшево. Анимация большой размытой тени может стоить кадров на слабых устройствах — вместо этого анимируйте opacity псевдоэлемента, который несёт тень.
Этот инструмент бесплатный?
Да, он бесплатный. Без регистрации и электронной почты. Результат на этой странице.
Как получить результат?
Используйте инструмент на этой странице. Результат появится здесь, без отправки по электронной почте.