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.
- 40
- tools
- 6
- sections
Motion & easing
Curves, shadows and clip paths.
8- Easing WizardDesign cubic-bezier, spring and bounce curves visually.
- Anime.js Easing EditorTune easing curves and springs with a live preview.
- Easing GradientsGradients with eased stops, so fades lose their hard edge.
- cubic-bezier.comCompare two curves side by side.
- Easings.netReference of standard easing functions.
- ClippyVisual clip-path builder.
- Easing GraphsCurated easing curves, graphed side by side.
- shadowLabBuild box shadows for web and React Native in one place.
Color & contrast
Check it before someone else does.
4- OKLCH PickerPick and convert colors in OKLCH.
- Color.reviewContrast checker that previews your pair as real text.
- WebAIM Contrast CheckerQuick WCAG contrast check for any pair.
- OKLCH.fyiGenerate 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 RadiiWork out the inner radius so nested corners stay concentric.
- Design Tokens GeneratorBrand colors in, semantic CSS variables and a Tailwind theme out.
- Gradient Border PluginTailwind plugin for gradient borders via mask-composite.
- kugiriSplits text into lines, words and characters where the browser already broke it.
SVG & images
Clean it, compress it, ship it.
6- SVGOMGOptimize 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.
- ramsAutomated design review for generated code: accessibility and visual bugs.
- AgentationGives an agent visual feedback on what it just built.
- RemediateIn-app feedback with screenshots and annotations, routed to your tracker.