What's new
Every new tool, guide and fix, newest first. Corrections are listed too, because if something here was wrong, you deserve to know it changed. Follow along with the Atom feed.
— Two new tools and faster pages
- New Colour converter: hex, RGB, HSL, HWB and OKLCH, with WCAG contrast and an sRGB gamut check
- New Cubic-bezier easing generator: drag the curve, preview it, copy cubic-bezier() or a linear() version
- Improved Faster pages: one variable font file per typeface instead of duplicates, deferred scripts, minified and long-cached CSS
— Four more effect recipes and keyboard fixes
- New Hover underline animations, including one that survives links wrapping onto two lines
- New 3D flip cards that work with hover, keyboard focus and a button
- New Animating accordion height to auto: grid rows, interpolate-size and ::details-content
- New Animating the native dialog element in and out with @starting-style
- Fixed The Smooth Accordion and Hamburger Morph animations can now be operated from the keyboard
— Eight in-depth CSS effect recipes
- New CSS typewriter effect: the steps() and ch technique, multi-line typing and when to use JavaScript instead
- New Skeleton loading screens: layout-matched placeholders, a compositor-friendly shimmer and accessible loading states
- New Animated gradient borders: three techniques compared, animated with @property
- New Shake animation for form errors, with an accessible, reduced-motion-friendly version
- New CSS loading spinners: three lightweight techniques, delayed display and an accessible status
- New Fade in on scroll with CSS scroll-driven animations, plus a safe IntersectionObserver fallback
- New Animated gradient text that stays readable: contrast, forced colours and reduced motion
- New An infinite CSS marquee with a seamless loop and a proper pause control
— A new tool, three guides and an accuracy overhaul
- New CSS clamp() generator: fluid font sizes and type scales, with a check that 200% browser zoom still works
- New Guide: fluid typography with clamp(), with worked maths and zoom results
- New Guide: WCAG 2.2 colour contrast for developers, with 17 real colour pairs tested
- New Guide: robots.txt vs noindex vs canonical, and which to use when
- Improved The homepage is now a directory of every tool, with a quick filter
- Improved Rewrote the developer notes on all 16 tool pages; every code sample was run before publishing
- Improved Every animation's markup and CSS is now written out on its category page, and the JS tips library reads without JavaScript
- Improved Every page is available as Markdown for AI assistants and coding agents (add .md to any URL)
- Improved Microsoft Clarity now loads only after you accept cookies, and the privacy and cookie policies describe exactly what loads
- Improved Accessibility: labels on every form control, reduced-motion support and corrected heading levels
- Fixed Around twenty factual errors across tools and guides, including what Search Console's "Discovered – currently not indexed" status means
- Fixed The slug, text case and keyword tools now handle accented and non-English text (Straße → strasse, café stays café)
— First guides published
— FrontendHelpers launched
- New Free browser-based SEO and CSS tools, a copy-paste CSS animation library, JavaScript tips, Dev Essentials and a React vs Angular comparison
Spotted a mistake or want a tool added? Email hello@frontendhelpers.com.