CSS techniques
Glassmorphism in CSS: how backdrop-filter works
How backdrop-filter creates frosted glass in CSS, the settings that look right, and the support, contrast and performance details most snippets leave out.
Author
Refract Team
5 articles
Image optimisation
WebP vs AVIF vs JPEG: which image format should you use?
A practical comparison of WebP, AVIF and JPEG for websites: which to use by default, where AVIF is worth the extra effort, and how to serve both with a fallback.
Typography
Fluid typography with clamp(), explained
How clamp() makes text scale smoothly between screen sizes, how to work out the middle value, and the zoom rule that keeps fluid typography accessible.
Image optimisation
What favicon sizes do you actually need?
The short list of favicon sizes a modern website needs, what each one is for, the HTML to add, and what Google requires to show your icon in search.
News
Welcome to Refract Tools
Why Refract exists, what the ten free tools do, and why your files never leave your browser.