About
About CSS Orbit
Eight free tools for the visual side of CSS: colours, gradients, shadows, shapes, motion and sizing.
What it does
CSS Orbit collects the generators front-end developers reach for every week: a gradient generator with OKLCH blending and layers, a box shadow generator, a border radius generator, a clamp() calculator for fluid type, a cubic bezier generator, a colour converter with contrast checks and color-mix(), a px to rem converter and a specificity calculator. Each one produces CSS you can paste straight into a project, with a Tailwind class where that makes sense.
How it works
Everything runs as JavaScript in your browser tab. Nothing you type, paste or drag is sent to a server, and the tools keep working if your connection drops after the page has loaded. There is no account and nothing to install.
Maths you can check
The colour conversions, gamut mapping, interpolation and color-mix() follow the formulas and sample code in the CSS Color 4 and 5 specifications. Specificity follows Selectors Level 4, and the easing preview evaluates cubic-bezier() and steps() the way CSS Easing defines them. The clamp() calculator prints every step of its arithmetic, so you can see exactly where each number comes from.
Limits
Browsers keep adding CSS features, and support differs between them. The tools describe what the specifications say; when it matters, test the result in the browsers your visitors use.