Blog
New tools, CSS techniques and web tips.
- CSS background patterns — checkerboard, grid, zigzag and crosshatch Four pure-CSS background patterns (no images) plus a word & character counter.
- Liquid glass in CSS — frost, rim, sheen and real refraction How to build an Apple-style liquid glass effect with pure CSS, and how far you can push it with an SVG displacement filter.
- New tool — CSS pattern generator Build pure-CSS background patterns interactively — pick colors, scale and angle, then copy the code.
- New tool — Image to Base64 / Data URL converter Encode an image to a Base64 data URL for inlining, or paste a data URL/Base64 to preview and download it.
- Two CSS calculators and three UI snippets New px↔rem and aspect-ratio tools, plus pure-CSS animated underline, tooltip and accordion snippets.
- 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.
- 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.
- 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.
- New tool — Cubic-bezier easing generator Drag the control points to craft a custom CSS easing curve, preview it live and copy the cubic-bezier value.
- Animated backgrounds, a CSV/JSON converter and more Four animated CSS snippets plus a CSV ⇄ JSON converter and a tints & shades generator.
- New snippets & tools — toggles, neumorphism, lorem ipsum and more Four CSS snippets and two text utilities just landed, each with a live preview or copy-ready output.
- More CSS effects, a color mixer and an HTML entity tool Four new CSS snippets plus two utilities — blend colors and escape HTML, all in your browser.
- WebP vs AVIF — which image format should you use? A practical comparison of WebP and AVIF for the web, with when to reach for each and how to convert.
- Why your CSS gradients look muddy (and how OKLCH fixes it) The grey dead-zone in sRGB gradients explained, and how OKLCH interpolation produces vivid, even transitions.
- 3 new CSS snippets — gradient text, spinner, skeleton Three reusable CSS recipes with a live, editable preview you can tweak and copy.
- Font tools — convert TTF to WOFF2 in your browser A new Font category — convert TTF/OTF fonts to WOFF2 (and back) and inspect any font file, all locally.
- 12 text & data tools, all in your browser JSON, Base64, JWT, hashes, UUIDs, regex, diffs, timestamps, case conversion, QR codes and cron — no upload, no sign-up.
- Introducing WebTricks A growing toolbox of fast, in-browser tools and copy-paste snippets for web developers — free, private, no sign-up.