Developer Tools

CSS Design Studio

Visual generators for shadows, gradients, borders, animations, hover effects and backgrounds. Tweak with live previews, start from presets and copy clean CSS, Tailwind or React.

• CSS Component Kit Generator

  Combine a button, form field, card and badge from the studios into one consistent mini design system with shared CSS variables, Tailwind theme and tokens.

• CSS Transform Generator

  Generate CSS transforms: translate, rotate and scale on X, Y and Z, skew, perspective and transform-origin. 2D and 3D presets; CSS export.

• CSS Filter & Backdrop-filter Generator

  Apply CSS filters visually: blur, brightness, contrast, grayscale, hue, invert, opacity, saturation, sepia and drop-shadow, or backdrop-filter glass.

• CSS Cubic-bezier Editor

  Design CSS easing curves: drag the cubic-bezier handles, compare your curve with ease and linear in a live race, and export CSS, Tailwind or JS.

• SVG Shape Divider Generator

  Create SVG section dividers: waves, curves, tilts, triangles, arrows, zigzags, mountains and clouds. Flip, invert, layer; export HTML, CSS, SVG or React.

• SVG Wave Generator

  Generate organic SVG waves: smooth, peaked or stepped outlines, layered with fading opacity or a gradient. Randomize, then export SVG, HTML, CSS or React.

• SVG Pattern Generator

  Seamless background patterns: dots, grids, graph paper, diagonals, checkers, hexagons, waves, stars and more. Export as CSS, an SVG tile or Tailwind.

• CSS Loader & Spinner Generator

  Over 100 pure-CSS loaders: spinners, dots, bars, pulses, progress bars, skeletons and more. Accessible markup, reduced-motion support and copy-ready code.

• CSS Scrollbar Styler

  Style scrollbars in Chrome, Edge, Safari and Firefox: width, thumb, track, hover color, radius and inset, with fallbacks for every browser.

• CSS Cursor Generator

  Try every CSS cursor keyword, or design a custom SVG cursor (dot, ring, crosshair, arrow, hand, pen, star) with the right hotspot and a fallback.

• CSS Box Shadow Generator

  Build layered CSS box shadows visually: drag offsets, stack up to six layers, generate smooth eased shadows and export CSS, SCSS or Tailwind.

• CSS Text Shadow Generator

  Create CSS text shadows layer by layer: soft lifts, neon glows, letterpress, emboss, outlines and retro stacks, with a contrast check and Tailwind export.

• CSS Border Generator

  Design CSS borders: line styles, per-side widths and colors, outlines, gradient and animated borders. Checks UI contrast; exports CSS or Tailwind.

• CSS Border Radius & Blob Generator

  Round corners, pills, leaves and drops, or drag four handles to build organic blobs from all eight border-radius values. Optional morph animation.

• Glass Background Studio

  Design a whole glassmorphism scene: blurred blobs behind 1–3 glass layers, grain, a no-blur fallback and contrast checks. Export CSS, Tailwind or React.

• CSS Glassmorphism Generator

  Create frosted-glass panels with backdrop-filter: blur, tint, saturation, edges and grain over colorful backgrounds, with a fallback and contrast check.

• CSS Neumorphism Generator

  Generate neumorphic soft-UI styles: flat, concave, convex and pressed surfaces from one base color, with light direction and an accessible edge.

• CSS Clip-path Generator

  Make CSS clip-path shapes visually: drag polygon points, add or remove them, or use circle, ellipse and inset. 36 presets incl. stars, arrows, hexagons.

• CSS Text Effects

  CSS text effects: gradient, outline, long shadow, neon, glitch, typewriter, reveal, marquee, highlighter and 3D. 60 presets; export CSS, Tailwind or React.

• CSS Hover Effects

  Over 200 copy-ready CSS hover effects for cards, images, links, menus and icon buttons. Tune timing and colors, then export CSS, Tailwind or React.

• Animated Background Generator

  Create animated CSS backgrounds: aurora, gradients, waves, starfields, snow, grids and blobs. Stack layers, check performance, export CSS, React or HTML.

• CSS Gradient Generator

  Design CSS gradients visually: drag color stops, mix in OKLCH, build mesh gradients and add grain. 300 presets; export CSS, Tailwind, SVG or PNG.

• CSS Animation Generator

  Build CSS keyframe animations visually with a timeline, springs and scroll-driven triggers. 140+ ready animations; export CSS, SCSS, Tailwind or React.

• CSS Button Generator

  Design CSS buttons visually with 16 styles, 35+ hover effects, every state and 160 presets. Export CSS, SCSS, Tailwind, React or Shopify Liquid.

All CSS Design Studio tools →

Layout & Components

Build grids, flexbox layouts and responsive rules visually, then style accessible cards, form fields, toggles, tooltips and badges that respect focus and contrast.

• CSS Grid Generator

  Build CSS grid layouts visually: set column and row tracks, paint named areas cell by cell, or make auto-fill grids. Export CSS, Tailwind or React.

• CSS Flexbox Playground

  Learn and build flexbox layouts: direction, wrap, justify-content, align-items, gap and per-item grow, shrink, basis, order, align-self. CSS and Tailwind.

• Aspect Ratio Calculator

  Simplify aspect ratios, find the missing width or height, and get CSS aspect-ratio code, Tailwind classes or image markup that prevents layout shift.

• CSS Media & Container Query Generator

  Build CSS media and container queries: width ranges, modern range syntax, dark mode, reduced motion, hover and contrast, with a live 'matches now' check.

• CSS Card Generator

  Design CSS cards: vertical, horizontal, image overlay, profile, pricing and stat layouts with shadows, borders and hover effects. Export HTML, CSS, React.

• CSS Input & Form Field Styler

  Style accessible form fields: outlined, filled, underline, floating-label and pill inputs with focus, error and disabled states, plus contrast checks.

• CSS Toggle Switch, Checkbox & Radio Designer

  Design accessible toggle switches, checkboxes and radio buttons from native inputs: six styles, any size and color, focus rings and reduced-motion support.

• CSS Tooltip Generator

  Accessible CSS tooltips: four positions, arrows, fade, scale or slide animations and delays. Opens on hover and focus, stays hoverable, closes with Escape.

• CSS Badge & Tag Generator

  CSS badges, tags and chips: solid, soft, outline, dot, gradient, icon, removable chip and count styles in six tones with readable contrast.

Color & Typography

Pick palettes in OKLCH, convert color formats, check WCAG and APCA contrast, pull colors from images and set fluid type scales with readable font pairs.

• Color Palette from Image

  Extract the main colors from any photo or logo in your browser. Choose 2–12 colors, see each one’s share, and export CSS, SCSS, Tailwind or JSON.

• Color Converter

  Convert colors between HEX, RGB, HSL, HWB, OKLCH and OKLab. Paste any CSS color, adjust it with OKLCH sliders and check contrast with black and white text.

• Color Palette Generator

  Generate a color palette from one base color: harmonies plus a 50–950 OKLCH shade scale. Text-safe shades; export CSS, SCSS, Tailwind or JSON tokens.

• Color Contrast Checker

  Check text and UI color contrast against WCAG 2.2 (AA, AAA, 3:1 for UI), see the APCA score (draft), and get the nearest passing color in one click.

• Font Pairing Tool

  Pair heading and body fonts from 13 system font stacks (no downloads), preview them in an article, tune size and line height, and copy CSS or Tailwind.

• Fluid Type Scale Generator

  Generate a fluid type scale with clamp(): set base sizes and ratios for small and large screens, preview any width, and export CSS, SCSS, Tailwind or JSON.

Code Utilities

Format, convert, encode, decode and compare data in your browser: JSON, YAML, CSV, Base64, URLs, JWTs, regular expressions, hashes, UUIDs and more.

• JSON Diff – Compare Two JSON Files

  Compare two JSON documents structurally: see every added, removed and changed value by path, ignore array order, and export an RFC 6902 JSON Patch.

• JSON to CSV Converter (and CSV to JSON)

  Convert JSON arrays to CSV and CSV to JSON. Nested objects flatten to dot paths, delimiters are detected, numbers inferred, and Excel UTF-8 is optional.

• JSON to YAML Converter (and YAML to JSON)

  Convert JSON to clean YAML and YAML to JSON for configs, Docker Compose, Kubernetes and CI files. Ambiguous values are quoted and errors show the line.

• Base64 Encode & Decode

  Encode text or files to Base64 and decode Base64 back, with full UTF-8 support, the URL-safe alphabet, optional padding and MIME line wrapping.

• URL Encode & Decode

  Percent-encode text for URLs, decode %XX sequences, and parse any URL into its parts and query parameters, with tracking parameters flagged and removed.

• JWT Decoder

  Decode JSON Web Tokens in your browser: header, payload and claims with readable dates, expiry and safety checks, plus optional HS256 verification.

• Regex Tester

  Test JavaScript regular expressions live, with highlighted matches, named groups, replacement preview, a plain-language explanation and common patterns.

• UUID Generator (v4, v7, ULID, NanoID)

  Generate random UUID v4, time-ordered UUID v7, ULID and NanoID values in bulk with your browser's secure random generator, and inspect any UUID's version.

• Hash Generator (SHA-256, SHA-512, MD5)

  Compute SHA-256, SHA-384, SHA-512, SHA-1 and MD5 hashes of text or files in your browser, create HMACs, and verify downloads against a checksum.

• Lorem Ipsum Generator

  Generate placeholder text by paragraphs, sentences or words in Latin, English, German, Spanish or Russian, with optional HTML paragraphs and word counts.

• HTML Entity Encoder & Decoder

  Escape text for HTML with named, decimal or hex character references, or decode entities back to characters. Escape only special characters, or more.

• px to rem Converter

  Convert px to rem and em (and back) with any root size, or convert a whole stylesheet at once. Export CSS variables, CSV or an SCSS rem() function.

• Design Tokens Generator

  Generate design tokens from three brand colors: color scales, semantic aliases, spacing, type, radii, shadows. Export CSS, DTCG JSON, SCSS, Tailwind, JS.

• Tailwind to CSS Converter

  Convert Tailwind classes to plain CSS, including hover focus dark and breakpoint variants and arbitrary values, or turn CSS into Tailwind classes.

• CSS Specificity Calculator

  Calculate CSS selector specificity (a, b, c) with a breakdown of what counts. Handles :is(), :not(), :has(), :where(), :nth-child(of S), pseudo-elements.

• Password Generator

  Generate strong random passwords in your browser with the Web Crypto API. Choose length and character sets and see the entropy. Nothing is sent or stored.

Code compressors

• JavaScript Minifier – Terser in Your Browser

  Minify JavaScript with Terser in your browser: Safe, Balanced or Max presets, license comments kept, source maps, diff view and gzip and brotli sizes.

• HTML Minifier – Compress HTML Safely in Your Browser

  Minify HTML in your browser: collapse whitespace, drop comments and redundant attributes, minify inline CSS and JS, and keep <pre> content intact.

• Code Beautifier – Format JavaScript, CSS, HTML and JSON

  Turn minified or messy JavaScript, CSS, HTML and JSON into readable code with consistent indentation, in your browser. Minify again with one click.

• Gzip & Brotli Size Checker – Compression Size Analyzer

  See how big your JavaScript, CSS, HTML, SVG or JSON is raw, minified, gzipped and brotli-compressed, with a chart of the savings. Runs in your browser.

• JSON Formatter & Validator

  Format, validate and minify JSON in your browser. Errors show the exact line and column, comments and trailing commas can be fixed, and keys can be sorted.

• SVG Optimizer

  Shrink SVG files in your browser: remove editor metadata, comments and unused IDs, round numbers, compact paths and strip scripts, with a live preview.

• CSS Minifier & Beautifier

  Minify CSS with Lightning CSS or CSSO, or beautify it, in your browser. Keeps license comments, makes source maps and shows gzip and brotli sizes.

SEO & Web

Prepare a site for search and sharing: meta and Open Graph tags, robots.txt, sitemaps, structured data, favicons and optimized SVG and image assets.

• Image to Base64 Converter

  Convert PNG, JPG, WebP, GIF, AVIF or SVG images to Base64 data URIs with ready CSS, HTML img or Markdown snippets and size guidance. Images stay local.

• Favicon Generator

  Create a full favicon set from an image, letters or an emoji: favicon.ico, PNG icons, Apple touch icon, maskable icon, SVG and web manifest in one ZIP.

• Meta Tag & Open Graph Generator

  Generate SEO meta tags, Open Graph and X card tags with live search and link previews, character and pixel-width counters, and checks for common mistakes.

• Robots.txt Generator & Tester

  Build a robots.txt file with presets for typical sites, WordPress and blocking AI crawlers, then test any URL against Google’s rules before publishing.

• XML Sitemap Generator

  Turn a list of URLs into a valid sitemap.xml or sitemap index, with optional lastmod, duplicate and invalid URL removal, host checks and XML escaping.

• JSON-LD Schema Markup Generator

  Generate JSON-LD structured data for articles, products, FAQs, local businesses, breadcrumbs, events, recipes, software and more, with required fields.