Developer & DevOps for Designer

43 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.
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
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 Filter Generator

Dial in blur, brightness, contrast, grayscale, sepia, hue-rotate, saturate, invert, opacity + drop-shadow with live preview — copy the filter string
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 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.
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