Генератор тіні CSS
Накладіть кілька м’яких шарів, щоб тінь виглядала природно, і скопіюйте CSS.
Запечатано на цьому пристрої
Працює у вашому браузері. Нічого не завантажується на сервер.
Запечатано
Попередній перегляд
Шари тіні
Тіні ще немає. Додайте шар, щоб почати.
Код CSS
Як це працює
-
Почніть із шаблону
Оберіть як основу м’яку, багатошарову, «парящу», чітку або внутрішню тінь.
-
Налаштуйте шари
Змінюйте зсув, розмиття, розтягування, колір і непрозорість кожного шару, додавайте чи видаляйте шари. Попередній перегляд оновлюється одразу.
-
Скопіюйте CSS
Скопіюйте оголошення box-shadow і вставте його у свою таблицю стилів.
Поширені запитання
Що роблять розмиття й розтягування?
Розмиття пом’якшує край тіні: що більше значення, то розсіяніша тінь. Розтягування (spread) збільшує або зменшує тінь до застосування розмиття. Від’ємне розтягування з великим розмиттям дає м’який ефект «піднятого» елемента, поширений у сучасних інтерфейсах.
Навіщо кілька шарів тіні?
Справжня тінь має темне щільне ядро біля об’єкта й м’який широкий ореол далі від нього. Поєднання невеликого чіткого шару з одним-двома більшими й світлішими шарами відтворює це й виглядає значно природніше, ніж одна тінь.
Що таке внутрішня тінь (inset)?
Внутрішня тінь малюється всередині елемента, а не зовні. Поверхня виглядає вдавленою, що добре пасує полям введення чи натиснутим кнопкам.
Чи працюватиме тінь у всіх браузерах?
Так. box-shadow, кілька шарів і синтаксис кольору rgb(), використаний у коді, підтримують усі сучасні браузери.
Чи сповільнює тінь мою сторінку?
Статичні тіні малюються легко. Дуже велике розмиття на багатьох елементах або анімація самої тіні можуть коштувати більше. Щоб плавно анімувати тінь, краще змінюйте непрозорість псевдоелемента, який несе цю тінь.