Безкоштовні інструменти, Зображення та дизайн
Генератор box-shadow
Накладайте шари тіні, налаштовуйте повзунками й копіюйте CSS.
Готові варіанти
Питання
Навіщо використовувати кілька шарів тіні?
Справжні тіні мʼякі біля обʼєкта і зникають далі. Накладання двох-трьох тіней зі зростаючим розмиттям і спадною прозорістю виглядає набагато природніше, ніж одна велика розмита тінь.
Що роблять розтягнення (spread) і внутрішня тінь (inset)?
Розтягнення збільшує або зменшує тінь перед розмиттям; негативне розтягнення тримає велике розмиття щільно під елементом. Внутрішня тінь малюється всередині блока, що робить його схожим на вдавлений.
Чи сповільнюють тіні сторінку?
Кілька статичних тіней — це нормально. Анімація великих, дуже розмитих тіней може викликати ривки прокрутки на слабких телефонах. Замість цього анімуйте прозорість шару з тінню.
Ще інструменти: зображення та дизайн
- Видалення фонуПрибирає фон із фото за кілька секунд.
- Стиснення зображеньМенший розмір файлу без помітної втрати якості.
- Конвертер зображеньПеретворення між PNG, JPG і WebP, а також SVG у PNG.
- HEIC у JPGПеретворює фото з iPhone на JPG, які відкриваються будь-де.
- Зміна розміру зображеньЗміна розміру та обрізка під точні параметри для Instagram, YouTube, Facebook та інших.
- Кольорова палітра із зображенняДістає основні кольори з будь-якого фото з кодами HEX і RGB.