Free CSS Generators & Online Developer Tools

Turn any color into a perceptually uniform OKLCH tint-and-shade scale, compare it to naive HSL, then export as CSS, Tailwind, SCSS, or JSON.

Round individual corners with draggable handles or build organic blob shapes — copy as CSS, Tailwind, or HTML.

Stack multiple layered drop shadows with a live preview, start from Material, glow or neumorphism presets, copy as CSS or Tailwind. Free, no signup.

Design polygon, circle, ellipse, and inset clip-path shapes with drag handles — preview against photos, then copy CSS, Tailwind, React, or SVG.

Build flexbox layouts visually with a live preview: direction, justify, align, wrap, gap and per-item flex. Copy the CSS or HTML. Free, no signup.

Build linear, radial, and conic CSS gradients with a visual picker — copy as background-image CSS or Tailwind.

Paint named grid areas, size every track and start from Holy Grail or Dashboard presets. Copies grid-template-areas CSS. Free, no signup.

Stack layered text shadows from neon, fire, 3D pop, emboss and outline presets, drag to set the offset, then copy the text-shadow as CSS or Tailwind.

Paste any CSS and get matching Tailwind v4 utility classes, verified against the real compiler, with a side-by-side visual proof they render identically.

Drag the curve to design a custom CSS easing function — live preview, then copy CSS, JS, Tailwind, Framer Motion, GSAP, or React Spring code.

Tune blur, saturation, tint, border, and shadow for the frosted-glass effect — copy the CSS with the Safari -webkit- prefix.

Drag colorful control points to design a smooth mesh gradient — then export as CSS, Tailwind, SVG, or PNG.

Converts hex, rgb(), hsl() and oklch() in either direction, returning all four formats at once and flagging colors that fall outside the sRGB gamut.

Convert px to rem and rem to px instantly, both directions, with a live reference table. Runs in your browser.

Generate a full shadcn/ui theme from a single color — accessible light & dark palettes in OKLCH, live preview, then copy the globals.css for Tailwind v4 or v3.

The Tailwind CSS v4 palette: 22 color families, 242 shades. Copy any shade as hex, OKLCH, RGB, HSL or class name, or match a hex to its nearest Tailwind color.

Upload your Excel or CSV file and get a complete interactive dashboard - charts, KPIs, and AI-written insights - in under 60 seconds. No coding, no design skills required.

Convert ASCII decimal or octal codes to text, or text to ASCII codes. Bidirectional, runs entirely in your browser.

Convert images to AVIF, or decode an AVIF back to PNG, JPG, or WebP. Runs in your browser. AVIF encode support varies by browser.

Make grid backgrounds, CSS patterns, mesh gradients and particle effects in your browser — tweak the colors and scale, then copy the CSS or Tailwind.

Draws CODE128, EAN-13, UPC-A and CODE39 barcodes from a typed value, validates check digits before rendering, and exports vector SVG or raster PNG.

Decodes RFC 4648 Base32 strings to UTF-8 text and encodes text to Base32, ignoring case, padding and whitespace on input. An encoding, not encryption.

Encodes text to Base62 and decodes it back, using only 0-9, A-Z and a-z with no padding, so the result is safe in a URL. An encoding, not encryption.

Convert a number between any base from 2 to 36 — binary, octal, decimal, hex, and custom bases shown at once. Runs entirely in your browser.

Decode Base58 strings to text or hex bytes, or encode with the Bitcoin alphabet. Handles leading-zero bytes correctly. Runs entirely in your browser.

Decodes Base64 and Base64URL strings to text, and encodes text, images or files to Base64, including data URIs and RFC 2045 line wrapping.

Add, subtract, multiply, divide, and run bitwise AND/OR/XOR on binary numbers, with decimal and hex shown side by side. Runs entirely in your browser.

Decode binary to UTF-8 text or encode text to binary, space-grouped or continuous, with a per-byte table of binary, decimal, hex and character.

Convert text to UPPERCASE, lowercase, Title Case, Sentence case, camelCase, PascalCase, snake_case, kebab-case, and CONSTANT_CASE. Runs entirely in your browser.

Swap two colors in an image — every pixel matching color A becomes color B and vice versa, in one pass. Runs entirely in your browser.

Build a cron expression visually, or paste one to validate it, read it back in plain English, and preview the next run times. Standard 5-field Unix cron.

Beautify minified or messy CSS, SCSS, and LESS into consistently indented, readable code. Powered by Prettier, runs entirely in your browser.

Paste CSV and get a clean JSON array of objects — quoted commas, escaped quotes, and newlines in fields handled correctly. Runs in your browser.

Convert a curl command into JavaScript fetch() code — quote-aware parsing of method, URL, headers, body, and basic auth. Runs in your browser.

Compare two blocks of text line by line or word by word, with additions and deletions highlighted. Runs entirely in your browser.

Remove duplicate lines from text — case-sensitive or insensitive matching, keep first or last occurrence. Runs entirely in your browser.

Free favicon generator and ICO editor — convert PNG to ICO (plus JPG, WebP & SVG), adjust background, padding and corners, then download the .ico and HTML link tags.

Decode hex to UTF-8 or ASCII text, or encode text to hex. Auto-detects space, comma, 0x-prefix and no-delimiter input.

Convert hex to decimal, or decimal to hex, binary, and octal — every field syncs live. Runs entirely in your browser.

Escape text to HTML entities, or decode named and numeric entities back to characters. Runs entirely in your browser.

Format or minify HTML — script and style content are preserved exactly. Runs entirely in your browser.

Paste HTML and get clean Markdown, with GitHub-flavored tables and strikethrough support. Runs entirely in your browser.

Create bcrypt password hashes for Apache/Nginx Basic Auth htpasswd files. Runs entirely in your browser.

Remove a background color from an image or existing ICO to create a transparent icon, then download a multi-size .ico. Runs entirely in your browser.

Fade an image online — solid, linear or radial opacity, with an optional fade area. Free, runs entirely in your browser.

Paste JS or JSX and get consistently indented, readable code powered by Prettier. Runs entirely in your browser.

Pretty-prints JSON at 2-space, 4-space or tab indentation, minifies it to one line, sorts keys recursively, and reports syntax errors with line and column.

Paste a JSON array or object and get a downloadable CSV, with nested objects flattened and a union header across rows. Runs entirely in your browser.

Convert a pasted JSON sample into TypeScript interfaces, with nested objects hoisted into named types. Runs entirely in your browser.

Paste any JWT or bearer token to instantly decode the header, payload, and claims. Inspect exp, iat, iss, and sub — runs in your browser.

Sign a JSON Web Token with HS256 (HMAC-SHA256) directly in your browser via the Web Crypto API. Secrets never leave your device.

Build a spec-compliant llms.txt file from scratch, your sitemap, or an existing file — with live validation, then copy or download.

Paste Markdown and get clean HTML, with GFM tables and a live preview. Runs entirely in your browser.

Minify JavaScript with Terser — mangle and compress toggles, a live before/after size comparison. Runs entirely in your browser.

Converts text to International Morse Code and back, covering all letters, digits and common punctuation, with a space between letters and a slash between words.

Spell out any number in English — decimals, negatives, or currency mode for checks. Runs entirely in your browser.

Change colors in a PNG — pick a color to replace and a replacement, tune tolerance, and keep edges smooth. Runs entirely in your browser.

Convert a PNG to a multi-size .ico — pick your sizes and download. Runs entirely in your browser.

Convert a PNG to WebP — adjust quality and see the file size drop live. Runs entirely in your browser.

Generate one word or hundreds at once — filter by length, choose lowercase, Capitalized, or UPPERCASE output. Runs entirely in your browser.

Strip newlines from pasted text — replace with a space, remove entirely, or keep paragraph breaks. Runs entirely in your browser.

Build custom rules per crawler, block AI bots, add your sitemap, then copy or download. Runs entirely in your browser.

Encode or decode ROT13 — the same operation does both. Runs entirely in your browser.

Hash text or files to SHA-1, generate HMAC-SHA-1, and verify checksums. Runs entirely in your browser.

Computes SHA-512 digests of text or files and HMAC-SHA-512 with a key, and compares a digest against an expected value. One-way; not for passwords alone.

Removes an SVG's background by editing its markup: auto-detects full-canvas shapes to toggle off, or strips elements by color. Output stays vector.

Paste or upload SVG markup and shrink it with SVGO — strip comments and metadata, reduce path precision. Runs entirely in your browser.

Rasterizes an SVG to PNG at 1x, 2x, 4x or an exact custom width, with a transparent or solid background. Runs on a canvas in the browser.

Convert SVG markup to a React JSX component in your browser — className, camelCase attrs, style objects. Also covers svg to jsx.

Render an SVG safely, inspect its dimensions, and view the formatted code. Runs entirely in your browser.

Reverse every character, reverse the word order, or reverse each word while keeping their order. Runs entirely in your browser.

Convert a Unix timestamp to a date in any IANA timezone and back to epoch seconds, with the live current epoch, Discord tags and code snippets.

Decode percent-encoded, hex, or decimal UTF-8 byte sequences to text, or encode text to bytes. Runs entirely in your browser.

Generate v4 (random), v7 (sortable) or v1 UUIDs and GUIDs, up to 1,000 at once, then parse any UUID to read its version and timestamp.

Format, minify, and validate XML — comments, CDATA, and the XML declaration are preserved. Runs entirely in your browser.

Convert YAML to JSON and JSON to YAML instantly. Bidirectional, browser-based, with indent and style options.

Calculate fully loaded CAC from ad spend, agency fees, tools and salaries, then read the LTV:CAC ratio and payback period against industry benchmarks.

Calculate Stripe fees and net payout for any amount, or reverse it to find what to charge. Standard published US, UK, EU, CA and AU rates, itemised.

Preview an image under protanopia, deuteranopia, or tritanopia, side by side with the original. Runs entirely in your browser.

Reports the WCAG contrast ratio for any two colors, with AA and AAA results for normal and large text, the non-text 3:1 check, and a passing-color suggestion.