Дизайн и 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
вычисляйте специфичность селектора и сравнивайте идентификаторы, классы, атрибуты, псевдоклассы и селекторы элементов.
Открыть инструмент →Конструктор функций сглаживания CSS
проверьте контрольные точки cubic-bezier и создайте повторно используемый CSS для времени переходов.
Открыть инструмент →Извлекатель пользовательских свойств CSS
найдите объявления CSS-переменных, дублирующиеся определения и их последние разрешённые текстовые значения.
Открыть инструмент →Конструктор CSS Media Query
генерировать медиазапросы по ширине, ориентации и предпочтениям движения из явных адаптивных условий.
Открыть инструмент →Извлекатель значений цвета CSS
извлекайте и подсчитывайте HEX, RGB, HSL и современные функциональные значения цветов из вставленного CSS.
Открыть инструмент →Конструктор правила поддержки CSS
сгенерируйте положительные и резервные запросы к функциям из одного проверенного CSS-объявления.
Открыть инструмент →Конструктор стека шрифтов CSS
составьте стек font-family с кавычками, явным универсальным резервным шрифтом и удалением дубликатов.
Открыть инструмент →Анализатор z-index CSS
извлекайте числовые объявления z-index и ранжируйте значения наложения, не выполняя таблицу стилей.
Открыть инструмент →Аудитор длительности CSS-анимаций
время анимации и переходов в инвентаре и сообщите, присутствует ли обработка reduced-motion.
Открыть инструмент →Инвентарь точек перехода CSS
извлеките контрольные точки медиа-запросов min-width и max-width и укажите их частоту и порядок.
Открыть инструмент →Проверка логических свойств CSS
сравните использование физических и зависящих от потока CSS-свойств для макетов, совместимых с writing-mode.
Открыть инструмент →Инвентаризация размеров шрифтов CSS
извлекайте объявления font-size по значению и единице измерения, чтобы выявить несогласованные масштабы типографики.
Открыть инструмент →Анализатор дорожек CSS Grid
объявления строк и столбцов grid-template для сетки inventory с использованием repeat и minmax, краткие сведения об использовании.
Открыть инструмент →На этой странице нет подходящих инструментов.