Generating is the easy part.
UI tools and a pattern reference for people who build interfaces — each one built to answer the question underneath the output: which option do I pick?
No account · runs in your browser · nothing you paste is uploaded
Preview
CSS
cubic-bezier(0.34, 1.56, 0.64, 1)
Why this and not another generator
It decides, it doesn't just generate
The easing library says when each curve is right. The contrast matrix names which tone pairs collapse under colour blindness. Output without the judgement that picks it is half a tool.
Nothing you paste is uploaded
Every tool runs in your browser — no account, no upload, no server. State lives in the URL, so a configured tool is a link you can send to someone.
It tells you when not to use it
Every element page carries a “when not to use it” section, and every comparison ends in a single decision rule. That is the part most references leave out.
23 tools
Every card shows what the tool actually makes — not an icon standing in for it.
shadcn/ui Theme Generator
Turn one brand color into a complete shadcn/ui theme, in light and dark.
Tailwind CSS Color Generator
Turn one color into a full Tailwind scale, from 50 to 950.
Contrast Matrix
Check every shade in your palette against every other one.
Color Format Converter
Convert a color between HEX, RGB, HSL and OKLCH.
Dark Mode Mapper
Derive a dark palette that actually matches your light one.
Color Blindness Simulator
See your palette the way roughly 1 in 12 men does.
Tailwind v3 → v4 Colour Migrator
Turn a v3 colour object into a v4 @theme block.
Palette from an Image
Pull the dominant colours out of a picture, then build a scale.
Blob Generator
Soft organic shapes, and the CSS to make them move.
SVG Optimiser
Strip what a drawing app left behind, keep the drawing.
50 element references
What each pattern is called, what it is for, and the part most references leave out — when not to use it.
Every comparison ends in one rule.
All 21 comparisons- Infinite ScrollvsPaginationIf a user will want to find one item again, paginate. If the value is only in what comes next, scroll.
- Alert BannervsToastIf missing it costs the user something, it must stay on screen. Toasts are for messages it is safe to miss.
- AccordionvsDisclosureIf opening one section should close another, it is an accordion. Otherwise it is disclosures, however many there are.
- SkeletonvsSpinnerIf you know what the content will look like, draw it. If you only know that something is running, spin.
Pick the right one, then ship it.
23 tools and 50 references, all in the browser. Nothing to install, nothing to sign up for.
Start with the easing editor