DevToolPal
UK

Генератор CSS-тіней (box-shadow)

Створюйте CSS-тіні візуально: накладайте кілька шарів, налаштовуйте зсув, розмиття, розтягування, колір і inset, з живим переглядом, шаблонами та CSS для копіювання.

Працює локально, нічого не завантажується на сервер

Шари тіні

Тіні немає. Додайте шар або виберіть шаблон.

Перегляд

Колір блока
Тло

CSS

Шаблони
CSS тіні
 
 
 
 
 
Що робить інструмент


Генератор тіней дає змогу налаштувати CSS-тінь на око й скопіювати готове оголошення box-shadow. Накладайте скільки завгодно шарів, задавайте кожному зсув, розмиття, розтягування, колір і непрозорість, перемикайте його у внутрішню тінь — перегляд оновлюється миттєво. Можна також вставити наявне значення box-shadow і редагувати його візуально. Усе працює у вашому браузері.


Як користуватися


    

  1. Почніть із шаблону або залиште приклад.
    2. 

  2. Виберіть шар кнопками Шар або натисніть + Додати шар, щоб накласти ще один.
    3. 

  3. Рухайте Зсув по горизонталі, Зсув по вертикалі, Розмиття й Розтягування, виберіть Колір і зменште Непрозорість для м’якості. Увімкніть Внутрішня, щоб отримати тінь усередину.
    4. 

  4. Підберіть Колір блока, Тло й Радіус кутів перегляду під свою сторінку. Вони впливають лише на перегляд.
    5. 

  5. Скопіюйте код із картки CSS.
    6. 



Поле CSS тіні внизу можна редагувати: вставте тінь зі стилів або дизайн-інструменту, і елементи керування її підхоплять. Довжини в rem і em перераховуються в px з розрахунку 16px.


Приклад


.card {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 12px 24px -6px rgb(30 64 175 / 0.25);
}


Поради для природних тіней


    

  • Низька непрозорість. Чорний на 5–25 % виглядає реалістично; щільні темні тіні здаються важкими.
    • 

  • Від’ємне розтягування не дає великому розмиттю вилазити з боків — це прийом більшості тіней «карток».
    • 

  • Підфарбуйте тінь. Тінь із відтінком тла чи фірмового кольору багатша за чистий сірий.
    • 

  • Світло з одного боку. Тримайте вертикальний зсув додатним в усіх шарах, щоб тіні узгоджувалися щодо напрямку світла.
    • 

  • Продуктивність. Великі розмиття на багатьох елементах сповільнюють прокручування на слабких телефонах; анімуйте opacity або transform, а не саму тінь.
    • 

 
  
 
Часті запитання
 
 
  › Що означають чотири числа в box-shadow?  
По черзі: зсув по горизонталі, зсув по вертикалі, радіус розмиття і радіус розтягування. Додатні зсуви пересувають тінь праворуч і вниз. Розмиття пом'якшує край і не може бути від'ємним. Розтягування збільшує тінь (додатне) або зменшує її (від'ємне) до застосування розмиття.
 
  › Навіщо кілька шарів тіні?  
Справжні тіні чіткі біля предмета й тануть удалині. Два й більше шари, наприклад маленька чітка й велика м'яка тінь, виглядають набагато природніше за одне темне розмиття. Так будують рівні висоти більшість дизайн-систем.
 
  › Що робить inset?  
inset малює тінь усередині блока, а не зовні, ніби елемент втиснуто. Це використовують для полів введення, натиснутих кнопок і внутрішнього світіння. В одному box-shadow можна поєднувати внутрішні й зовнішні шари.
 
  › Чи повторює box-shadow заокруглення border-radius?  
Так. Тінь повторює форму елемента разом із заокругленими кутами, тому перегляд використовує заданий радіус. Прозорі ділянки зображення тінь не повторює — для цього є CSS-фільтр drop-shadow().