Як користуватися: Генератор градієнтів і тіней CSS
- 1
Оберіть градієнт або тінь блока
Перемикайтеся між двома редакторами за допомогою вкладок над попереднім переглядом.
- 2
Почніть із шаблону
Натисніть плитку шаблону, щоб завантажити його, або залиште типові значення й налаштовуйте їх.
- 3
Налаштуйте візуально
Перетягуйте зупинки кольору й задайте кут або додайте шари тіні та налаштуйте зсув, розмиття й розтягнення.
- 4
Скопіюйте код
Скопіюйте декларацію CSS або клас Tailwind і вставте у свій проєкт.
Ліміти та Pro
Безкоштовно й без реєстрації: необмежена кількість зупинок кольору та шарів тіні, 3 типи градієнтів, 3 простори змішування кольорів і 24 шаблони.
Pro прибирає рекламу; обидва редактори повноцінні в усіх тарифах. Дивитися Pro
Про інструмент: Генератор градієнтів і тіней CSS
Градієнти й тіні — два ефекти CSS, які найчастіше підбирають навмання в інструментах розробника браузера. Цей генератор дає для кожного з них візуальний редактор із великим попереднім переглядом наживо, а потім записує точну декларацію CSS і відповідний клас Tailwind із довільним значенням, наприклад bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)], тож результат можна одразу вставити в таблицю стилів або в className.
Редактор градієнтів створює лінійні, радіальні та конічні градієнти. Натисніть на смугу зупинок, щоб додати колір у вибраному місці, перетягніть зупинку, щоб перемістити її, або скористайтеся стрілками для точного позиціювання, а ще задайте кожній зупинці власну непрозорість. Лінійні й конічні градієнти мають кут, радіальні та конічні — центральну точку, радіальні — форму кола або еліпса, а будь-який із них можна повторювати для смуг і кілець. Також можна вибрати колірний простір для змішування: OKLab і OKLCH уникають сірої брудної середини, яку дає класичне змішування в sRGB між насиченими кольорами, і підтримуються всіма сучасними браузерами.
Редактор тіні блока складає стільки шарів, скільки вам потрібно. Кожен шар має зсув по X і Y, розмиття, розтягнення, колір із непрозорістю, перемикач «Внутрішня» та перемикач видимості, а шари можна переупорядковувати, адже перший малюється поверх решти. Блок попереднього перегляду з регульованими розміром, радіусом заокруглення й кольорами показує ефект на світній або темній поверхні.
Дванадцять шаблонів для кожного редактора — заходи сонця, колірні кола та смуги; підйоми Material, багатошарові мʼякі тіні, неоморфізм і різкі зсуви — стануть вам відправною точкою. Інструмент охоплює лише градієнти та тіні блока; text-shadow, filter: drop-shadow і градієнти SVG він не генерує.
Приватність
Усе відбувається на сторінці: кольори й налаштування не залишають ваш браузер, жодне зображення не надсилається на сервер. Поточний градієнт і тінь зберігаються в локальному сховищі, тож після повернення ви знайдете їх на місці.
Можливості
Лінійні, радіальні та конічні
Зупинки кольору з перетягуванням і непрозорістю, кут, центр, форма та режим повторення.
Багатошарові тіні
Складайте, переставляйте, ховайте шари тіні та робіть їх внутрішніми для реалістичної глибини.
CSS і Tailwind
Копіюйте готову декларацію або клас Tailwind із довільним значенням.