Fast, in-browser tools & ready-to-copy snippets for web developers
A growing toolbox of fast, in-browser tools and ready-to-copy code snippets for web developers. Compress images, convert colors, generate CSS — no upload, no sign-up.
Everything runs locally in your browser — no uploads, no sign-up.
Popular tools
All 36 tools →- Image compressor & converter Compress and convert images to WebP, AVIF, JPEG or PNG right in your browser. Resize, tune quality, compare sizes — nothing is uploaded.
- Color converter Convert any color between HEX, RGB, HSL, HWB and OKLCH instantly. Paste any CSS color, copy the format you need.
- CSS pattern generator Generate pure-CSS background patterns — checkerboard, dots, grid, stripes, zigzag, crosshatch. Tune colors, scale and angle, then copy the code. No images.
- Gradient generator Build linear, radial and conic CSS gradients with multiple stops and optional OKLCH interpolation. Live preview, copy the code.
- Box-shadow generator Visually craft a CSS box-shadow with live preview and copy the code. Offset, blur, spread, color and inset.
- Cubic-bezier easing generator Design custom CSS easing curves by dragging the control points. Live animation preview, presets and copy the cubic-bezier() value.
- Contrast checker Check color contrast for accessibility. Get the WCAG 2.1 ratio and APCA value with AA/AAA pass-fail for normal and large text.
- JSON formatter & validator Pretty-print, minify and validate JSON. Paste JSON, get readable output or a clear error — all in your browser.
- Font converter (WOFF2) Convert TTF/OTF fonts to WOFF2 for the web, or unpack WOFF2 back to TTF. Compresses locally in your browser.
- Favicon generator Turn any image into a full set of favicon and PWA icons (16–512px) with the HTML to drop in. Generated locally with Canvas.
- SVG optimizer Minify and clean up SVG markup with SVGO — strip metadata, collapse paths and shrink the file. Runs in your browser.
- CSS unit converter Convert between px, rem, em, pt and % against a configurable root font size. Type a value and copy any unit.
CSS guides
All posts →- A practical guide to CSS custom properties (variables) and theming CSS custom properties from syntax to theming — var() fallbacks, scoping, design tokens, dark mode with data-theme, light-dark(), @property and JS.
- A practical guide to CSS Grid CSS Grid from the ground up — tracks, the fr unit, repeat and minmax, auto-fit, template areas and placement — with copy-paste patterns.
- CSS background pattern generator — stripes, checkerboard, grid, dots and zigzag in pure CSS How every pattern in our CSS pattern generator is built with repeating-linear-gradient, radial-gradient and conic-gradient — with the actual CSS, scaling, animation, theming and performance notes.
- A practical guide to CSS transitions and animations When to use a transition vs a keyframe animation, the properties that matter, easing, performance and reduced motion — with patterns.
- A practical guide to Flexbox How flexbox really works — main vs cross axis, justify and align, the flex shorthand, gap and wrapping — with copy-paste patterns.
- Liquid glass CSS — the Apple liquid glass effect with CSS only (plus SVG refraction) A complete liquid glass CSS tutorial: frosted glass core, light-mode variant, SVG feDisplacementMap refraction, browser support table, accessibility and performance notes.
Categories
What's new
All posts →- A practical guide to CSS custom properties (variables) and theming CSS custom properties from syntax to theming — var() fallbacks, scoping, design tokens, dark mode with data-theme, light-dark(), @property and JS.
- Two CSS calculators and three UI snippets New px↔rem and aspect-ratio tools, plus pure-CSS animated underline, tooltip and accordion snippets.
- CSS background patterns — checkerboard, grid, zigzag and crosshatch Four pure-CSS background patterns (no images) plus a word & character counter.