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
Motion & easing
Curves, shadows and clip paths.
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.
Colour & contrast
Check it before someone else does.
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.
CSS & type
Scales, features and support tables.
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.
SVG & images
Clean it, compress it, ship it.
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.
Performance & accessibility
Measure before you ship.
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.