Дизайн і CSS
Генеруйте практичні кольори та CSS із живим локальним попереднім переглядом.
Конвертер кольорів
Перетворюйте кольори HEX, RGB і HSL та переглядайте точний результат.
Відкрити інструмент →Генератор CSS-градієнтів
Створіть двоколірний лінійний градієнт і скопіюйте готовий до використання CSS.
Відкрити інструмент →Перевірка контрастності WCAG
обчисліть коефіцієнт контрастності між двома кольорами та перевірте типові пороги WCAG AA і AAA для тексту.
Відкрити інструмент →Генератор тіней CSS для блоків
створіть box-shadow із живими значеннями кольору, зміщення, розмиття та розповсюдження.
Відкрити інструмент →Генератор тіней тексту CSS
створіть читабельне оголошення text-shadow і перегляньте його на вибраному тлі.
Відкрити інструмент →Генератор радіуса рамки CSS
встановіть чотири незалежні радіуси кутів і експортуйте отриману CSS-декларацію.
Відкрити інструмент →Генератор адаптивного CSS Clamp
обчислити вираз рідинного clamp між мінімальними та максимальними розмірами в межах ширин вікна перегляду.
Відкрити інструмент →Конвертер PX ↔ REM
конвертуйте пікселі та rem-одиниці, використовуючи явний розмір шрифту кореня для доступних макетів.
Відкрити інструмент →Генератор трикутників CSS
згенерувати трикутник CSS-рамки нульового розміру для чотирьох напрямків із налаштовуваними розміром і кольором.
Відкрити інструмент →Генератор відтінків кольору
створіть детерміновану шкалу відтінків від світлого до темного з HEX-колірного коду з CSS-змінними, які можна копіювати.
Відкрити інструмент →Генератор завантажувача CSS
створіть легкий доступний індикатор завантаження з налаштовуваними розміром, товщиною, швидкістю та кольорами.
Відкрити інструмент →Калькулятор специфічності CSS
обчисліть специфічність селектора та порівняйте ID, класи, атрибути, псевдокласи та селектори елементів.
Відкрити інструмент →Конструктор функцій згладжування CSS
перевіряйте контрольні точки cubic-bezier і створюйте повторно використовуваний CSS для часу переходу.
Відкрити інструмент →Витягувач користувацьких властивостей CSS
знайдіть оголошення змінних CSS, дубльовані визначення та їхні останні розв’язані текстові значення.
Відкрити інструмент →Конструктор медіа-запитів CSS
створювати медіазапити за шириною, орієнтацією та перевагою щодо руху на основі явних адаптивних умов.
Відкрити інструмент →Витягувач значень кольорів CSS
витягніть і підрахуйте значення кольорів HEX, RGB, HSL та сучасні функціональні значення кольорів із вставленого CSS.
Відкрити інструмент →Конструктор правила CSS @supports
згенеруйте позитивні та резервні запити щодо можливостей з одного перевіреного CSS-декларативу.
Відкрити інструмент →Конструктор стеку шрифтів CSS
створити стек font-family у лапках із явним резервним загальним сімейством і видаленням дублікатів.
Відкрити інструмент →Аналізатор Z-індексу CSS
витягувати числові декларації z-index і ранжувати значення накладання без виконання таблиці стилів.
Відкрити інструмент →Аудитор тривалості анімації CSS
інвентаризувати часи анімації та переходів і повідомити, чи присутня обробка зменшеного руху.
Відкрити інструмент →Інвентаризація точок перелому CSS
витягніть контрольні точки media-query для min-width і max-width та повідомте їхню частоту й порядок.
Відкрити інструмент →Перевірка логічних властивостей CSS
порівняйте використання фізичних і відносних до потоку CSS-властивостей для макетів, дружніх до writing-mode.
Відкрити інструмент →Інвентаризація розмірів шрифтів CSS
витягайте оголошення font-size за значенням і одиницею виміру, щоб виявити непослідовні шкали типографіки.
Відкрити інструмент →Аналізатор доріжок CSS Grid
оголошення рядків і стовпців grid-template для інвентаря з підсумками використання repeat і minmax.
Відкрити інструмент →На цій сторінці немає відповідних інструментів.