Всё для вёрстки и кода в одном разделе: генераторы CSS, разбор HTML, работа с JSON и регулярками.
Найдено инструментов: 22Задайте минимальный и максимальный размер — калькулятор соберёт clamp(), и шрифт будет плавно тянуться за шириной экрана.
ПопробоватьВизуальный генератор CSS Flexbox: расположите и выровняйте элементы, скопируйте готовый код CSS или Tailwind.
ПопробоватьВизуальный генератор CSS Grid: постройте адаптивную сетку без кода и скопируйте результат в CSS или Tailwind.
ПопробоватьВставьте селектор и узнайте его вес — станет понятно, какое правило победит в каскаде и почему стиль не применяется.
ПопробоватьПотяните за контрольные точки и получите свою cubic-bezier() для transition-timing-function или animation-timing-function.
ПопробоватьПереводите цвет между HEX, RGB, HSL, CMYK и LAB: вставьте значение в любом формате — остальные посчитаются автоматически.
ПопробоватьВставьте стили и получите сжатый CSS: комментарии и пробелы уйдут, размер файла упадёт на 20–40%.
ПопробоватьПереведите rem в px или px в rem: введите значение, задайте базовый размер шрифта — результат посчитается сразу.
ПопробоватьНастройте тень блока или текста ползунками и заберите готовый CSS: смещение, размытие, растяжение, внутренняя тень.
ПопробоватьСоберите CSS-градиент визуально — линейный, радиальный или конический — настройте цветовые точки и направление и скопируйте готовый код CSS и Tailwind.
ПопробоватьПодберите цвет текста и фона так, чтобы надпись читалась: коэффициент контрастности и вердикт по WCAG считаются сразу.
ПопробоватьСоберите анимацию на @keyframes или возьмите готовую: появление, пульсация, загрузка, анимация кнопки при наведении.
ПопробоватьВставьте код, адрес страницы или файл — проверим HTML на ошибки: валидность по W3C, линтинг разметки, семантику, доступность и порядок заголовков. Бонусом вы получите отчёт в PDF.
ПопробоватьОтформатируйте HTML или XML: читаемый вид с отступами (beautify) или минификация в одну строку. Результат появляется сразу, невалидная разметка подсвечивает ошибку.
ПопробоватьЗагрузите PNG или JPG — получите favicon.ico и PNG всех размеров одним архивом, плюс готовый код для вставки в <head>. По сути конвертер картинки в иконку для сайта.
ПопробоватьПроверьте, как ссылка выглядит при репосте: превью и предпросмотр ссылки для Telegram, Facebook, Twitter и WhatsApp, разбор тегов Open Graph и og:image, генерация недостающих тегов.
ПопробоватьВставьте JSON или YAML — получите читаемый вид, сжатую версию, перевод между форматами и разбор структуры.
ПопробоватьПроверяйте регулярные выражения онлайн для JavaScript, PHP и Python: подсветка совпадений и групп захвата сразу по мере ввода.
ПопробоватьПроверьте JavaScript онлайн: найдите синтаксические ошибки в коде ES6/ES2020+ и JSX прямо в браузере, без запуска.
ПопробоватьКодируйте и декодируйте данные в формате Base64
ПопробоватьПокажет payload, claims, алгоритм и срок действия. Токен не уходит с вашего устройства
ПопробоватьСоздавайте уникальные идентификаторы UUID — v4, v7 или v1
ПопробоватьИнструменты добавляются постоянно. Расскажите, чего вам не хватает, — это лучший способ повлиять на то, что появится следующим.
CSS, HTML и JavaScript решают разные задачи, но на практике редко нужны по отдельности: подобрали тень — сверили разметку — проверили JSON из ответа сервера. Раньше это были три раздела, теперь один — как и работа над одной страницей.
Если нужен именно CSS, именно HTML или именно JavaScript — у каждого по-прежнему есть отдельная страница с тулами только этого языка, просто добраться до неё теперь можно и отсюда.
Потому что задачи фронтенда обычно смешанные: правите стили — заглядываете в разметку — проверяете данные, которые пришли скриптом. Один раздел вместо трёх — меньше кликов между тем, что и так делается вместе.
Да, они никуда не делись — ссылки на них есть прямо на этой странице. Просто в общей навигации сайта теперь один пункт «Разработка», а не три.
Нет. Все инструменты раздела считают результат в браузере: HTML и JSON, которые вы вставляете, никуда не отправляются.
