Fast Text Format Tools
Неперевершена колекція блискавичних утиліт для форматування, перетворення та оптимізації вашого робочого процесу.
Вибране
Нещодавно використані
Нещодавно додані
Текст та Порівняння
Конвертери
Миттєво перетворюйте регістр рядків, кодуйте URL та розкодовуйте Base64.
Кодувальник / Декодувальник
Кодуйте та декодуйте різні формати, такі як URL, Base64 та HTML-сутності.
Сортувальник Списків & Дедуплікатор
Миттєво сортуйте текстові масиви за алфавітом, числами або довжиною та видаляйте дублікати рядків.
Регулярні вирази
Виконуйте регулярні вирази, переглядайте збіги в реальному часі та використовуйте шпаргалки.
Порівняння тексту
Порівнюйте два блоки тексту пліч-о-пліч, щоб виділити відмінності.
Статистика тексту
Рахуйте слова, символи, речення, оцінюйте час читання та перевіряйте щільність ключових слів.
Перекладач
Миттєво перекладайте текст між десятками мов.
Код та Форматування
Base64 у файл
Декодуйте рядки Base64 або Data URI назад у завантажувані файли (зображення, PDF, документи, аудіо) з миттєвим переглядом.
Форматування коду
Форматуйте, перевіряйте та мінімізуйте ваш код JSON, JavaScript, CSS та HTML у чистий, зрозумілий синтаксис.
Формат CSS
Форматуйте, прикрашайте, перевіряйте та мініфікуйте код CSS зі спеціальними відступами.
Візуальні генератори CSS
Візуально створюйте та експортуйте код CSS для тіней, градієнтів, Flexbox і Grid макетів.
CSV у JSON/SQL
Перетворюйте дані CSV у масиви JSON або запити SQL INSERT.
cURL в Fetch
Легко перетворюйте команди cURL на код JavaScript Fetch API.
HTML / XML
Миттєво прикрашайте, мінімізуйте та очищайте брудний код.
HTML у JSX
Клієнтський інструмент для перетворення тегів та атрибутів HTML у сумісний із React JSX.
HTML у Tailwind CSS
Перетворюйте стандартні inline-стилі та CSS-оголошення на утилітарні класи Tailwind CSS з інтерактивним переглядом.
Обфускатор JS
Перетворюйте зрозумілий JavaScript-код на нечитабельний і мініфікований для захисту логіки.
JSON в Код
Перетворюйте об'єкти JSON на типізовані моделі для різних мов.
Переглядач Дерева JSON
Візуально досліджуйте, розгортайте, згортайте, шукайте та фільтруйте структури JSON з перевіркою шляхів.
Markdown
Пишіть чистий markdown з живим попереднім переглядом HTML.
Переглядач Source Map
Клієнтський інструмент для завантаження файлів .map та демініфікації стек-трейсів.
SQL Форматер
Прикрашайте та форматуйте брудні SQL запити.
Екранування та деекранування рядків
Безпечне екранування (та деекранування) лапок, зворотних слешів і розривів рядків для JSON, SQL, HTML та Java/C#.
Оптимізатор SVG
Мініфікація та очищення SVG-коду.
SVG у PNG/WEBP
Клієнтський інструмент на canvas для растеризації коду або файлів SVG у завантажувані зображення.
Утиліти XML
Форматування та мініфікація XML-рядків.
YAML <-> JSON
Миттєво конвертуйте між YAML та JSON.
Дані та Криптографія
Bcrypt Хеш
Генеруйте та перевіряйте Bcrypt паролі локально.
Час Epoch
Перетворюйте мітки часу в зрозумілі дати.
Генератор хешів
Обчислюйте криптографічні хеші MD5, SHA-1, SHA-256 та SHA-512.
Декодер JWT
Безпечно аналізуйте JSON Web Tokens у відформатовані дані Header та Payload.
Генератор HMAC
Обчислення та перевірка криптографічних підписів HMAC з використанням SHA-256, SHA-512, MD5 та секретних ключів.
Генератори та Утиліти
ASCII Арт
Створюйте великі текстові банери ASCII.
Генератор штрих-кодів
Клієнтський інструмент на canvas для створення лінійних штрих-кодів (UPC, EAN, Code39) з тексту.
Калькулятор CHMOD
Легко обчислюйте дозволи файлів Linux.
Контрастність
Перевірте доступність контрастності кольорів WCAG.
Формат кольору
Миттєво перетворюйте коди кольорів HEX, RGB та HSL.
Декодер Cron
Перекладайте розклади cron у зрозумілий людині текст.
Генератор Фавіконів
Конвертуйте стандартні зображення в універсально сумісні файли .ico та створюйте стандартні розміри іконок для веб-додатків.
Зображення Base64
Перетворюйте файли зображень у рядки Base64 Data URI та властивості CSS background-image.
Стиснення зображень
Стискайте та оптимізуйте зображення JPEG, PNG, WEBP та AVIF локально у своєму браузері.
Генератор таблиці уцінки
Візуальний редактор сітки, який дозволяє користувачам легко додавати рядки/стовпці та миттєво виводить ідеально відформатований синтаксис таблиці Markdown.
Генератор Метатегів та Open Graph
Створюйте та візуально переглядайте метатеги SEO, картки Twitter та теги Facebook Open Graph.
Макет генератора даних
Згенеруйте сотні рядків фальшивих тестових даних (імена, електронні адреси, дати, кредитні картки) і експортуйте їх у форматі CSV, JSON або SQL INSERT для тестування бази даних.
Ген. паролів
Безкоштовний генератор випадкових паролів. Створюйте надійні, безпечні паролі за допомогою криптографічних алгоритмів.
Набір інструментів PDF
Об'єднуйте, розділяйте, витягуйте, повертайте та змінюйте порядок сторінок PDF на 100% локально у браузері.
Текст-заповнювач
Створюйте випадковий текст-заповнювач для макетів інтерфейсу.
QR-код
Створюйте масштабовані QR-коди, що скануються, з тексту або URL.
Тестер і конструктор регулярних виразів
Тестуйте регулярні вирази за допомогою підсвічування груп зіставлення та захоплення в реальному часі, розбивки пояснень синтаксису та режимів перевірки кількох рядків.
Генератор Robots.txt
Створюйте коректні правила robots.txt, директиви сканування та блокуйте ШІ-парсерів.
UUID / GUID
Миттєво генеруйте універсальні унікальні ідентифікатори (v4).
Генератор Карт Сайту XML
Створюйте валідні XML-карти сайту з власними URL, частотою змін та пріоритетами для пошукових систем.
Фінанси та Одиниці
Конвертер валют
Обчислюйте глобальні обмінні курси в реальному часі.
Конвертер единиц
Миттєво перетворюйте довжину, вагу, температуру та зберігання даних.
Мережа
Пошук DNS
Перевірка DNS-записів у реальному часі.
Перегляд HTTP-заголовків
Перегляд HTTP-заголовків запиту, які надсилає ваш браузер.
Тест швидкості Інтернету
Перевірте швидкість завантаження та віддачі.
Пошук IP
Пошук IP-адрес та даних геолокації.
Пошук MAC-вендора
Визначення виробників обладнання за MAC-адресами.
Пошук RDAP
Пошук реєстраційних даних доменів та IP, реєстратора, серверів імен і статусу DNSSEC через RDAP.
Відстеження перенаправлень і посилань
Розкривайте скорочені URL-адреси та відстежуйте повні ланцюжки перенаправлень HTTP 301/302 до кінцевого пункту призначення.
Перевірка SSL-сертифікатів
Перевіряйте дійсні SSL/TLS-сертифікати, ланцюжки видавців, зворотний відлік терміну дії, домени SAN та відбитки для будь-якого домену.
Калькулятор підмереж
Розрахунок мережевих масок CIDR та діапазонів IP.
URL Парсер
Легко витягайте та створюйте рядки запитів URL.
Парсер User-Agent
Вилучення інформації про ОС та браузер з рядків User-Agent.
Тестер вебхуків
Надсилання, тестування та налагодження вебхуків з користувацькими заголовками, підписами HMAC та інспекцією відповідей у реальному часі.
Візуальні генератори CSS
Візуально створюйте та експортуйте код CSS для тіней, градієнтів, Flexbox і Grid макетів.
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.25);background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);Click any item in the preview to select and inspect its properties.
.flex-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 16px;
}Як використовувати
Виберіть режим генератора (Тінь, Градієнт, Flexbox або Grid). Налаштуйте параметри за допомогою повзунків та скопіюйте згенерований CSS-код.
Часті запитання
Як працює CSS Box Shadow і що означає кожен параметр?
Властивість CSS box-shadow додає одну або кілька тіней до рамки елемента. Параметри визначають горизонтальне зміщення (X), вертикальне зміщення (Y), радіус розмиття (наскільки м’яким або розсіяним виглядає край тіні), радіус поширення (наскільки тінь розширюється або звужується), колір тіні (зазвичай напівпрозорий rgba) і необов’язкове ключове слово «вставка» для візуалізації тіні всередині контейнера.
Чому для реалістичних тіней інтерфейсу користувача варто використовувати кілька шарів тіні коробки?
Реальні тіні складаються як з навколишнього освітлення, так і з прямого спрямованого світла. Нанесення щільної, трохи темнішої тіні на широку, м’яку тінь із низьким рівнем прозорості створює природну висоту та глибину, не виглядаючи каламутним чи штучним.
Яка різниця між лінійним і радіальним градієнтами в CSS?
Лінійні градієнти змінюють кольори вздовж прямої осі, визначеної градусами або ключовими словами (наприклад, 135 градусів або «внизу праворуч»). Радіальні градієнти виходять назовні з однієї початкової точки у формі круга або еліпса, створюючи прожекторні або сферичні переходи кольорів.
Коли слід використовувати CSS Flexbox чи CSS Grid?
Flexbox — це одновимірна система компонування, яка ідеально підходить для організації елементів в одному рядку чи стовпці (таких як панелі навігації, групи кнопок і вирівнювання панелей інструментів). CSS Grid — це двовимірна система макетів, розроблена для складних структур веб-сторінок, макетів інформаційної панелі з кількома стовпцями та чіткого вирівнювання сітки.
Яка різниця між justify-content і align-items у Flexbox?
justify-content контролює розподіл flex-елементів уздовж головної осі (горизонтальний, якщо flex-direction є рядком; вертикальний, якщо стовпець). align-items контролює позиціонування елемента вздовж поперечної осі (перпендикулярно головній осі).
Як repeat(auto-fit, minmax(...)) створює адаптивні сітки без медіа-запитів?
Ключове слово auto-fit наказує контейнеру сітки вмістити якомога більше стовпців залежно від поточної ширини контейнера. Функція minmax(200px, 1fr) гарантує, що кожен стовпець ніколи не зменшується нижче 200px, а розширюється пропорційно, щоб зайняти вільний простір, що залишився.
Що таке властивість пропуску в сучасних макетах CSS?
Властивість gap визначає послідовний відстань між рядками та стовпцями в макетах Flexbox і Grid. Він замінює застарілі маржі та негативні поля та не додає інтервали по зовнішньому периметру контейнера.
Чи сумісні згенеровані стилі CSS з усіма сучасними веб-переглядачами?
так Сучасні CSS box-shadow, лінійні/радіальні градієнти, Flexbox і CSS Grid мають універсальну підтримку в браузерах Chrome, Firefox, Safari, Edge, iOS Safari та Android без використання застарілих префіксів постачальників, таких як -webkit- або -moz-.
Як flex-grow і flex-shrink визначають розмір предмета?
flex-grow визначає, скільки позитивного простору контейнера, що залишився, повинен поглинати елемент відносно своїх братів і сестер. flex-shrink визначає швидкість, з якою елемент стискається, коли місця в контейнері недостатньо.
Чи можу я використовувати експортований CSS у проектах React, Vue, Svelte або Tailwind?
так Експортовані правила CSS можна вставити безпосередньо в стандартні файли CSS, модулі CSS, стилізовані компоненти або перекласти в довільні службові класи Tailwind (наприклад, shadow-[...], bg-[linear-gradient(...)]).
Результатів не знайдено
Спробуйте змінити пошукові терміни.