Результати надаються виключно в інформаційних цілях і можуть містити помилки. Перевіряйте важливу інформацію самостійно. Використання цього інструмента здійснюється на ваш власний ризик.
Що робить цей інструмент
Генератор тіней CSS створює box-shadow за допомогою повзунків для горизонтального й вертикального зсуву, розмиття, розтягнення, кольору та непрозорості. Попередній перегляд оновлюється, поки ви тягнете повзунок, а готовий рядок можна одразу скопіювати. Спочатку задано м’яку тінь на 10px нижче блока з розмиттям 20px і 25% чорного.
Чотири довжини записуються в порядку CSS: зсув X, зсув Y, радіус розмиття, радіус розтягнення. Додатні значення зсуву зміщують тінь праворуч і вниз, від’ємні — ліворуч і вгору. Розмиття пом’якшує край, а розтягнення збільшує чи зменшує тінь до розмиття. Колір записується як rgba(), тож непрозорість уже вбудована, і тінь гармонує з будь-яким фоном.
Коли використовувати
- Додавання глибини карткам, модальним вікнам і випадним спискам у пласкому дизайні.
- Відтворення рівнів підняття (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 псевдоелемента, який несе тінь.
Цей інструмент безкоштовний?
Так, він безкоштовний. Без реєстрації та електронної пошти. Результат на цій сторінці.
Як отримати результат?
Скористайтеся інструментом на цій сторінці. Результат з’явиться тут, без надсилання електронною поштою.