Генератор CSS box-shadow
Работает на устройстве. Ничего не отправляется.Всё работает в браузере - никуда ничего не отправляется.
Начать с
Слои
Смещение по горизонтали
Смещение по вертикали
Размытие
Растяжение
Цвет
Код
CSS
box-shadow:
0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);Tailwind CSS
shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]Изменить готовую тень
Создавайте тени CSS со слоями, inset и мягкими пресетами, смотрите вживую и копируйте CSS или класс Tailwind. Вставьте готовую тень, чтобы её изменить.
Подбирайте тень на глаз, а не угадывая числа. Начните с заготовки - мягкая, средняя, жёсткая ретро, мягкая многослойная, парящая, внутренняя, неоморфизм или свечение, - затем настройте смещение, размытие, растяжение, цвет, непрозрачность и inset каждого слоя; предпросмотр обновляется по ходу. В тени может быть до восьми слоёв - именно так получаются самые естественные тени. Скопируйте результат как CSS или класс Tailwind, поделитесь ссылкой или вставьте box-shadow из своих стилей, чтобы продолжить работу.
Частые вопросы
Что делают размытие и растяжение?
Размытие смягчает край тени: 0 - резкая линия, большие значения растушёвывают её на больше пикселей. Растяжение увеличивает (положительное) или уменьшает (отрицательное) тень до размытия; небольшое отрицательное растяжение с сильным размытием даёт мягкие «поджатые» тени современных интерфейсов.
Зачем несколько слоёв?
Настоящая тень тёмная и чёткая у предмета и светлее и мягче вдали. Один слой не может и то и другое; несколько слоёв с удваивающимся смещением и размытием, как в заготовке «Мягкая многослойная», выглядят гораздо естественнее.
Что такое тень inset?
Тень inset рисуется внутри блока, а не снаружи, и он выглядит вдавленным - удобно для полей ввода, углублений и нажатых кнопок. Внутренние и внешние слои можно смешивать в одной тени.
Замедляет ли box-shadow страницу?
Несколько теней почти ничего не стоят. Очень большое размытие на множестве элементов или анимация самого box-shadow могут снижать частоту кадров на слабых телефонах; для анимации лучше менять непрозрачность псевдоэлемента, у которого тень уже есть.