CSS Box Shadow Generator (Мільті-слойний і вставлений)

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

Працює у вашому браузері. Ваші файли ніколи не залишають пристрій. Дізнатися, як це перевірити

…

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

  1. 1
    Крок 1: відкрийте «CSS Box Shadow Generator (Мільті-слойний і вставлений)» і введіть дані

    Введіть числа або текст, додайте файл чи виберіть потрібні параметри. Нічого не завантажується: усе залишається у вашому браузері.

  2. 2
    Крок 2: що робить «CSS Box Shadow Generator (Мільті-слойний і вставлений)»

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

  3. 3
    Крок 3: прочитайте результат і порівняйте

    Результат з'являється одразу. Змініть одне значення, щоб побачити, як змінюється відповідь, і залиште цифру, що підходить вашому випадку.

  4. 4
    Крок 4: скопіюйте або збережіть

    Скопіюйте результат або завантажте його. Для важливого рішення звірте його з офіційним джерелом чи консультантом.

Про цей інструмент

Додавати глибину і тактильну висоту до карт та елементів інтерфейсу користувача. Пристосовувати горизонтальні / вертикальні зрушення, радіус розмиття, відстань поширення і колір тіні з нерозривним слайдером. Тестувати проти світлого і темного фонів, переміщати вставки тінь для тиску кнопки стану, і копіювати стандартні CSS або Tailwind класи миттєво.

Поради для найкращого результату

Перш ніж почати, приділіть хвилину опціям і спершу спробуйте інструмент на невеликому прикладі. Усе працює в браузері на вашому пристрої: нічого з введеного чи доданого не завантажується, а закриття вкладки стирає все. Якщо щось виглядає неправильно, перезавантажте сторінку й повторіть або скористайтеся посиланням для повідомлення на цій сторінці, щоб розповісти, що пішло не так. Якщо результат усе ще здається хибним, змінюйте по одному значенню, щоб побачити, яке поле впливає найбільше. Додайте сторінку в закладки, якщо користуватиметеся нею знову.

Коротко

Поширені запитання

Як створити м'який, сучасний тінь?

Використовуйте більший радіус розмиття (20px-40px), негативний поширення (-4px) і низьку непрозорість (10%-25%) на темний сланцевий колір для ультра-гладкої тіні.

Чи ця підтримка вносить внутрішню тінь?

Включити перемикання "Вставити тінь", щоб створити внутрішній ефект тіні, ідеальний для вхідних полів, свердловини і націснутих кнопок.

Можна перевірити, як виглядає тінь на картках темного режиму?

Да. Натисніть "Темне полотно", щоб перевірити контраст тіні на глибокому сланці та темному фоні.

Чи генерується CSS сумісний з усіма браузерами?

Так, він генерує стандартний синтаксис для скриньки у відповідності з W3C підтримується всіма сучасними настільними і мобільними браузерами.

Повністю безкоштовноБез плати й реєстрації
Файли залишаються приватнимиУсе працює у вашому браузері
Просто вашою мовоюДоступно багатьма мовами