Free Frontend Developer Tools — Online Utilities for Everyday CSS
The small tools that save big time. Converters, calculators, checkers — collected in one place, free, with no login required.
Write the CSS these tools convert and check, from scratch: Flexbox, Grid, animations & responsive layout
ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link
CSS & Tailwind Converters
8 tools
Tailwind v3 to v4 Migration Tool
Paste your tailwind.config.js or .ts and get the Tailwind CSS v4 CSS file: @theme variables, @plugin, @custom-variant dark and @source, with a clear list of anything that needs doing by hand. A second tab renames v3 classes in your markup, like shadow to shadow-sm and bg-opacity-50 to /50.
SCSS to CSS Converter
Paste any SCSS block and get plain CSS in the same window — resolves nesting (including the & parent reference), substitutes $variables inline or as CSS custom properties, evaluates same-unit math, hoists nested @media queries. No build step, no npm install.
CSS to Tailwind Converter
Free CSS to Tailwind converter that turns any CSS block into clean Tailwind utility classes — instantly, in your browser, with no signup. Paste raw CSS, hover/focus pseudo-classes, or @media queries and get back Tailwind v3 or v4 utility classes with auto-applied variant prefixes (hover:, focus:, md:, lg:, dark:) and arbitrary-value fallbacks like px-[14px] for anything outside the default scale. Live preview included. Works offline. 100% client-side.
CSS-in-JS to CSS Converter
Paste a styled-components or emotion block and get plain CSS — handles tagged templates and object syntax, resolves & nesting into real selectors, converts camelCase to kebab-case, and outputs Plain CSS, CSS Modules, or SCSS.
CSS Minifier
Paste any CSS and instantly get a minified, production-ready version — strips comments, whitespace, and redundant tokens with live size savings.
PX to REM Converter
Convert pixel values to REM units instantly — set your base font size and get exact REM equivalents.
CSS Formatter & Beautifier
Paste minified or messy CSS and instantly get a cleanly indented, readable version — configurable indent, optional alphabetical sorting, lowercase hex, and live preview.
Tailwind to CSS Converter
Paste any Tailwind CSS class string and instantly get equivalent plain CSS — supports variants (hover, focus, md), arbitrary values, and four output formats: plain CSS, custom properties, SCSS, and @apply.
Code & Data Converters
7 tools
XML to JSON Converter
Convert XML to JSON in your browser — configurable attribute prefix, namespace handling, force-array tag list, type coercion, CDATA preservation, and a JSON to XML reverse direction. Works on SOAP responses, RSS feeds, sitemaps, and Maven POMs. 100% client-side, no upload.
SVG to JSX Converter
Paste any SVG and get a clean React component — auto-renames attributes, swaps hardcoded colors for currentColor or props, wraps in forwardRef with TypeScript and a size prop, and previews the result on light and dark backgrounds.
HTML to JSX Converter
Paste HTML, get React JSX — converts class to className, for to htmlFor, void elements to self-closing, event handlers to camelCase, and inline styles to object syntax. Handles 50+ attribute conversions and edge cases.
Base64 Encoder / Decoder
Encode or decode Base64 — text, JSON, JWTs, and files up to 5 MB. Standard and URL-safe variants with full UTF-8 support and live preview.
HTML Entity Encoder / Decoder
Encode or decode HTML entities — escape <, >, &, quotes, and special characters with named, decimal, or hex output.
JSON to TypeScript Converter
Paste any JSON and get TypeScript interfaces, Zod schemas, JSON Schema, and Go structs — all four formats from one input, with full inference options.
JSON / YAML / CSV Converter
Convert between JSON, YAML, and CSV in one tool. All 9 conversions, with options for indent, sort keys, YAML quote style, CSV delimiter, nested-object flattening and more.
Color & Accessibility
2 tools
Colour Contrast Checker
Check WCAG 2.1 contrast ratios between any two colours — instant AA / AAA pass-fail with a live preview.
Color Format Converter
Convert between hex, rgb, hsl, oklch, oklab, hwb, and named colors. Bulk mode — paste a whole stylesheet and convert every color at once with one click.
Calculators & Cheat Sheets
8 tools
Flexbox Cheat Sheet
Every CSS flexbox property visualized on one page — flex-direction, flex-wrap, justify-content, align-items, align-content, gap, order, flex-grow, flex-shrink, flex-basis, flex shorthand, align-self. Anchor-linked, copy-paste ready, no controls to fiddle with.
CSS Grid Cheat Sheet
Every CSS Grid property visualized on one page — grid-template-columns, grid-template-rows, grid-template-areas, gap, alignment, grid-column, grid-row, grid-area, subgrid. Plus 6 ready-to-paste canonical recipes (Holy Grail, Bento, Sidebar, Photo Gallery, Auto-fit Cards, Pricing). Anchor-linked, copy-paste ready.
Tailwind Config Theme Builder
Pick a primary color, get a complete Tailwind theme — 11-shade color scale, semantic tokens, dark mode variants, and four output formats: Tailwind v3, v4 @theme, plain CSS variables, and shadcn/ui tokens.
CSS Specificity Calculator
Paste any CSS selector and get its (a, b, c) specificity score — with a colour-coded breakdown of every ID, class, attribute, pseudo, and element.
CSS Unit Converter
Convert between every CSS unit — px, rem, em, pt, vw, vh, %, cm, in, deg, rad, ms, dpi — with live context controls and copy-on-click.
CSS Variable Checker
Paste any :root block and instantly see every --variable as a swatch, chip, or chain — with live filter, type detection, and var() resolution.
Responsive Breakpoint Tester
Preview any URL across iPhone, iPad, laptop, and desktop sizes — with Tailwind breakpoint detection, rotation, and live zoom.
Viewport Unit Calculator
Convert pixels to vw, vh, vmin, vmax — and back — at any viewport size, with device presets and a fluid-typography reference table.