Developer & DevOps for Designer
51 developer & devops tools hand-picked for Designer.
-
Base64 to File Converter
Paste raw Base64 or a data URL, decode it locally, inspect bytes, and download the reconstructed file.
-
CSS Border Radius Generator
Border radius generator — independent 8-corner control + blob shape randomizer, live preview, copy CSS or SVG path.
-
CSS Design Token Contrast Matrix
Paste CSS variables or JSON tokens, select fg/bg pairs, and flag every WCAG AA/AAA failure across your design system at once.
-
Case Converter
Convert text between camelCase, snake_case, kebab-case, PascalCase, Title Case, UPPER, lower — instant, browser-only
-
Color Blindness Simulator
Color blindness simulator — paste hex or upload image, see how it looks to people with protanopia / deuteranopia / tritanopia / monochromacy.
-
Color Contrast Checker
Color contrast checker — WCAG 2.2 AA/AAA compliance for normal/large text, real-time grade.
-
Color Converter
HEX ⇄ RGB ⇄ HSL ⇄ HSV ⇄ CMYK — instant 5-way conversion, live swatch — browser-only
-
Tailwind Palette Contrast Matrix
Paste Tailwind colors, CSS theme tokens, or JSON palettes and audit every foreground/background pair for WCAG AA and AAA contrast.
-
CSS Button Generator
Design buttons that look pressable — 3D raised, neumorphic, glass — with a live preview you can hover & press, plus full :hover/:active CSS export
-
CSS clamp() Fluid Typography Generator
CSS clamp() fluid typography generator — min/max font size, viewport range, full type scale (h1-h6 + body), copy CSS / Tailwind.
-
CSS Color Format Converter
Convert any color between HEX, RGB, HSL, OKLCH, CSS variable, and Tailwind — with live preview.
-
CSS Cubic Bezier Generator
Drag two handles, read the cubic-bezier() — five built-in presets, motion preview, solve y for any progress, browser-only
-
CSS Filter Generator
Dial in blur, brightness, contrast, grayscale, sepia, hue-rotate, saturate, invert, opacity + drop-shadow with live preview — copy the filter string
-
CSS Flexbox Generator
Generate production-ready flexbox CSS from visual controls — pick a layout preset, tweak properties, copy CSS, Tailwind, or React inline styles in one click.
-
CSS Flexbox Playground
Visual CSS Flexbox sandbox — tweak container and item properties live, see the layout update instantly, copy ready-to-use CSS.
-
CSS Font Stack Generator
CSS font stack generator — system-safe font families with full Win/Mac/Linux/Android/iOS fallback chains, with CJK fallbacks, copy as CSS/Tailwind/SwiftUI.
-
CSS Formatter & Minifier
Format and beautify CSS — sort properties, indent rules, expand or minify.
-
CSS Grid Visual Generator
CSS grid visual generator — drag to set columns/rows, place grid-area named regions, copy ready CSS + HTML, with 12 layout templates.
-
CSS Grid Generator
CSS Grid generator — visually design grid layouts (rows/cols/gap/areas), copy CSS code, fully responsive.
-
CSS Keyframes Animation Generator
Visually build @keyframes — edit keyframes, set transform/opacity/color, live-preview, and copy production-ready CSS — browser-only
-
CSS Line Clamp Generator
Truncate text after N lines with a trailing ellipsis, copy the CSS and the Tailwind class, with live preview, browser-only
-
CSS Media Query Generator
CSS @media query + responsive breakpoint generator — Tailwind / Bootstrap / Material presets, mobile-first vs desktop-first, dark mode, hover, reduced-motion, aspect-ratio.
-
CSS Minifier
Minify CSS — strip comments, whitespace, shorten colors, merge selectors. 30-60% smaller.
-
CSS Scrollbar Generator
Design custom scrollbars visually — exports WebKit + Firefox-standard CSS, live preview, one-click copy — browser-only
-
CSS Specificity Calculator
Score any CSS selector as an (a, b, c) triple, compare which rule wins the cascade, and see exactly which digit decided it — browser-only
-
CSS Transform Generator
CSS transform generator — rotate/scale/skew/translate (2D + 3D) with live preview, copy CSS, 12 preset combos.
-
CSS Triangle Generator
Pure-CSS triangles via the border trick — 8 directions, live preview, copy both border + clip-path CSS — browser-only
-
CSS Variable Deduplicator
Find duplicates and keep one clean copy of css variables from pasted text or uploaded local files.
-
CSS Variable Extractor
Extract, dedupe, and export css variables from pasted text or uploaded local files.
-
CSS Variable List Converter
Convert css variables from pasted text or uploaded local files.
-
CSS Variable List Validator
Validate and explain issues in css variables from pasted text or uploaded local files.
-
CSS Variable Normalizer
Normalize, sort, and prepare css variables from pasted text or uploaded local files.
-
Cubic Bezier Editor
CSS cubic-bezier editor — drag two control points, preview live with bouncing ball + scaling box + opacity fade, copy CSS / JS / Framer Motion / GSAP / SVG path.
-
File to Base64 Converter
Upload a small file and convert it to raw Base64 or a data URL locally for embeds, fixtures, and tests.
-
Flexbox Playground & CSS Generator
Flexbox playground — toggle every container and item property on a real flex box and copy the exact CSS. direction, justify, align, gap, order, grow/shrink/basis, align-self. 100% client-side.
-
Font File Inspector
Upload TTF or OTF files and extract family names, PostScript names, version, units per em, glyph count, and table list.
-
HTML Color Names
HTML named colors — all 147 CSS color names with hex/RGB/HSL, searchable + sortable.
-
HTML Form Extractor
Upload or paste HTML and extract forms, methods, actions, fields, labels, required flags, autocomplete, password fields, and security risks.
-
HTML Minifier
Minify HTML — strip comments, whitespace, optional attributes, inline CSS/JS. 40-60% smaller.
-
Google Fonts CSS2 URL Builder
Parse, edit, and generate Google Fonts CSS2 links, HTML preconnect tags, @import CSS, variables, and Tailwind font stacks.
-
Image Compressor (Local)
Image compressor — squeeze JPG/PNG/WebP without server upload, with quality slider, batch mode, file size comparison.
-
Image Metadata Inspector
Inspect PNG, JPEG, GIF, WebP, and SVG dimensions, bit depth, ICC, EXIF, XMP, animation, and notes.
-
JS Minifier
Minify JavaScript — strip comments, whitespace, optional name shortening. 40-70% smaller.
-
Meta Tag Generator
Generate SEO meta tags — title, description, Open Graph, Twitter Card, Schema.org.
-
Mock Data Generator
Generate realistic mock JSON / CSV / SQL data — names, emails, dates, addresses, nested objects.
-
PX REM EM Converter
CSS px ↔ rem ↔ em converter — visual scale, base font size adjustable.
-
SVG Asset Auditor
Audit SVG viewBox, dimensions, scripts, external references, styles, ids, classes, title, and desc tags.
-
SVG Optimizer
SVG optimizer — strip comments/metadata/empty attributes, round path decimals, collapse useless groups, minify in browser. No upload.
-
SVG to Data URI / CSS Background
Inline any SVG as a data URI — URL-encoded (smaller) or base64 — with ready-to-paste CSS, HTML and bare-URI output, side-by-side size diff, 100% in-browser.
-
Tailwind CSS Cheatsheet
Tailwind CSS cheat sheet — 100+ utility classes (spacing, color, flex, grid, typography, responsive) with live preview.
-
Type Scale Generator
Pick a base size + ratio (Major Third, Perfect Fourth, Golden…) and get a full modular type scale with px + rem, live preview, and CSS / Tailwind / SCSS export — browser-only