Генератор CSS box-shadow
Двигайте ползунки и копируйте CSS.
- Работает в вашем браузере — текст никуда не отправляется
- Без регистрации и квот, пользуйтесь бесплатно сколько угодно
Как это работает
Box-shadow принимает четыре числа и цвет в определённом порядке, а разница между тенью, которая выглядит как глубина, и тенью, которая выглядит как наклейка, целиком заключена в этих числах. Смотреть, как всё меняется при перетаскивании, гораздо быстрее, чем гадать.
Что означают четыре числа
По порядку: смещение по горизонтали, смещение по вертикали, радиус размытия и растяжение. Смещения сдвигают тень; размытие смягчает её край; растяжение увеличивает или уменьшает её до размытия. Отрицательное растяжение втягивает тень, так под карточкой получается компактная тень, которая не вылезает по бокам.
Как сделать реалистично
Свет обычно падает сверху, поэтому небольшое положительное смещение по вертикали без смещения по горизонтали выглядит естественно. Большие, очень прозрачные тени создают мягкую глубину; маленькие, тёмные и резкие выглядят как вырезанная наклейка. Реальные предметы отбрасывают тем более размытые тени, чем дальше они от поверхности, — большее размытие подразумевает более высокий элемент.
Внутренние тени
Внутренняя тень рисуется внутри элемента, а не снаружи — так делают нажатые кнопки, поля ввода и вдавленные панели. Применяются те же четыре числа, только направленные внутрь.
Несколько теней сразу
CSS принимает список через запятую, и наложение двух теней — одной компактной и тёмной, другой широкой и слабой — выглядит заметно лучше одной. Этот генератор создаёт одну; для многослойного эффекта вставьте две вместе сами.
Генератор CSS box-shadow: вопросы
В каком порядке идут значения?
Смещение по горизонтали, смещение по вертикали, размытие, растяжение, затем цвет.
Что делает отрицательное растяжение?
Оно сжимает тень до размытия, из-за чего она остаётся компактной под элементом, а не вылезает по бокам.
Что такое внутренняя тень?
Тень, нарисованная внутри элемента, а не снаружи, — её используют для нажатых кнопок и полей ввода.
Можно ли сделать многослойную тень?
Напрямую нет. CSS принимает список через запятую, поэтому создайте две тени и вставьте их вместе.