Генератор CSS box-shadow (тени блока)
Создавайте box-shadow, двигая ползунки и наблюдая результат на карточке. Объединяйте до шести слоёв для более мягких и реалистичных теней, используйте inset для эффекта вдавленности и начинайте с шаблонов: мягкая, парящая, свечение или неоморфизм. Копируйте CSS одним щелчком.
Как пользоваться
- Выберите шаблон или настройте смещение, размытие, растяжение, цвет и прозрачность тени.
- Добавляйте слои кнопкой + и выбирайте каждый для редактирования; измените фон, цвет блока и радиус углов под свой дизайн.
- Скопируйте CSS и вставьте его в правило элемента.
Частые вопросы
Что делают размытие и растяжение?
Размытие смягчает край тени; при нуле край чёткий. Растяжение увеличивает тень во все стороны до размытия, а отрицательное значение уменьшает её, что помогает большой размытой тени не выходить за пределы элемента.
Зачем нужно несколько слоёв тени?
Настоящие тени темнее у предмета и затухают с расстоянием. Сочетание небольшой чёткой тени с более крупной и мягкой имитирует это и выглядит естественнее одной тени. Первый слой в списке рисуется сверху.
Замедляет ли box-shadow страницу?
При обычном использовании нет. Очень большое размытие на множестве элементов или анимация самой тени могут снизить производительность на слабых телефонах; чтобы анимировать, меняйте прозрачность псевдоэлемента с тенью.
🏷️ Генератор мета-тегов
🖼️ Генератор Open Graph
🔗 UTM-метки: конструктор ссылок
🌈 Генератор CSS-градиентов