Skip to content

Small browser tools for the details: easing curves, contrast, type scales, SVG cleanup, product shots and the checks you run before shipping. Most take under a minute.

41
tools
6
sections
01

Motion & easing

9
  • Easing WizardDesign cubic-bezier, spring and bounce curves visually.
  • Anime.js Easing EditornewTune easing curves and springs with a live preview.
  • Easing GradientsnewGradients with eased stops, so fades lose their hard edge.
  • cubic-bezier.comCompare two curves side by side.
  • Easings.netReference of standard easing functions.
  • Smooth ShadowsLayered box-shadows that look like real light.
  • ClippyVisual clip-path builder.
  • Easing GraphsnewCurated easing curves, graphed side by side.
  • shadowLabnewBuild box shadows for web and React Native in one place.
02

Colour & contrast

4
  • OKLCH PickerPick and convert colours in OKLCH.
  • Color.reviewnewContrast checker that previews your pair as real text.
  • WebAIM Contrast CheckerQuick WCAG contrast check for any pair.
  • OKLCH.fyinewGenerate and explore uniform OKLCH palettes.
03

CSS & type

10
  • UtopiaFluid type and space scales with clamp() output.
  • Type ScalePreview modular type scales.
  • Wakamai FondueSee a font's OpenType features and axes.
  • Open PropsCSS custom properties for type, space and easing.
  • Modern CSS SolutionsModern fixes for old CSS problems.
  • Can I useBrowser support tables for every web feature.
  • Corner RadiinewWork out the inner radius so nested corners stay concentric.
  • Design Tokens GeneratornewBrand colours in, semantic CSS variables and a Tailwind theme out.
  • Gradient Border PluginnewTailwind plugin for gradient borders via mask-composite.
  • kugirinewSplits text into lines, words and characters where the browser already broke it.
04

SVG & images

6
  • SVGOMGOptimise SVGs with a live preview.
  • SVG Path EditorEdit path commands point by point.
  • SquooshCompare image codecs and compress in the browser.
  • RealFaviconGeneratorEvery favicon and touch icon from one source.
  • TransformConvert SVG to JSX, JSON to TypeScript and more.
  • OG PlaygroundPrototype OG images with Satori.
05

Code & product shots

3
  • ray.sonewBeautiful images of code snippets.
  • ui.cameranewProduct photography and video of interfaces, made in the browser.
  • RegExrnewBuild and test regular expressions with live highlighting.
06

Performance & accessibility

9
  • PageSpeed InsightsLab and field Core Web Vitals for any URL.
  • axe DevToolsAutomated accessibility testing in the browser.
  • WAVEVisual accessibility report on the page.
  • BundlephobiaCost of an npm package before you install it.
  • PolypaneBrowser for building responsive, accessible sites.
  • ResponsivelyOpen-source multi-viewport dev browser.
  • ramsnewAutomated design review for generated code: accessibility and visual bugs.
  • AgentationnewGives an agent visual feedback on what it just built.
  • RemediatenewIn-app feedback with screenshots and annotations, routed to your tracker.