Blog
New tools, CSS techniques and web tips.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Animated backgrounds, a CSV/JSON converter and more Four animated CSS snippets plus a CSV ⇄ JSON converter and a tints & shades generator.
- 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.
- 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.
- 3 new CSS snippets — gradient text, spinner, skeleton Three reusable CSS recipes with a live, editable preview you can tweak and copy.
- 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 CSS gradients look muddy in the middle — and how OKLCH gradients fix it The grey dead-zone in sRGB gradients explained, the in oklch / in oklab color interpolation syntax for linear-gradient and color-mix(), OKLCH vs HSL, a color-space comparison table, browser support and @supports fallbacks.
- 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.