Внутрішня тінь CSS — готовий код
Візуальне створення коду CSS box-shadow: повзунки для зсуву, розмиття, розтягування, кольору з прозорістю, режиму всередину та до чотирьох шарів із живим попереднім переглядом.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
Ця сторінка відкриває генератор box-shadow із уже ввімкненим прапорцем «Всередину», тож тінь малюється всередині елемента, а не позаду нього. Картка попереднього перегляду одразу показує втиснений ефект, і кожен повзунок продовжує оновлювати рядок CSS наживо.
Внутрішні тіні — це спосіб CSS імітувати глибину всередину: стани натиснутих кнопок, поля пошуку та введення, жолоби індикаторів прогресу та гравіровані панелі — усі вони на них покладаються. Оскільки тінь прилягає до внутрішнього краю, розмиття та розтягування поводяться дещо інакше, ніж у звичайної падаючої тіні — ці повзунки дають змогу відчути цю різницю одразу.
Коли втиснений вигляд буде готовий, скопіюйте рядок box-shadow у свою таблицю стилів. Ви також можете поєднати внутрішній шар зі звичайними зовнішніми шарами — додайте другий шар і зніміть для нього прапорець «Всередину», щоб змішати обидва в одному оголошенні.