Tools tagged #css
Every ecech. tool tagged css: 13 free calculators and utilities across Design & Color, Developer & Code. No signup, runs in your browser.
Border Radius
The slash syntax gives each corner a separate horizontal and vertical radius, which is how organic shapes are made in CSS without touching SVG.
Design🎨Box Shadow Generator
Real objects cast a tight contact shadow and a soft ambient one. Stack two box-shadow values and the result stops looking like CSS.
Design🎨Colour Palette Generator
Press space for a new palette, lock the ones you like, keep going. Spaced by lightness rather than randomly, so the result is actually usable in an interface.
Design🎨Colour Palette Harmony
HSL says the complement of blue is a much brighter yellow. Your eye disagrees. This rotates in OKLCH and shows both, so you can see the difference.
Design💻CSS clamp() Calculator
Generate production-ready clamp() from two sizes and two viewports — with the rem term that stops your text ignoring browser zoom, which pure vw versions break.
Developer💻CSS Gradient Generator
Linear, radial and conic gradients with as many stops as you like — plus the fix for the muddy grey band that appears between complementary colours.
Developer🎨Hex Opacity Calculator
Convert between hex alpha and percentage, and see the flat colour a semi-transparent layer actually produces over your background.
Design🎨Hex Shorthand
Shorthand doubles each digit, so #f61 is #ff6611 — not #ff6601. Shortening by truncation changes the colour.
Design🎨HEX to RGB
Paste any hex — 3, 4, 6 or 8 digits — and get RGB, RGBA, HSL, HSV and OKLCH at once, plus a tint and shade scale you can drop straight into a design system.
Design🎨HSL / HSV Converter
HSV at 100% saturation and 100% value is a vivid colour. HSL at 100% and 100% is white. Design tools show HSV, CSS wants HSL, and nothing warns you.
Design🎨Named Colour Finder
148 names with a century of accumulated history. Finding the closest one needs a perceptual distance, because RGB distance picks a different answer.
Design🎨px to rem
em multiplies with each nested level, so four levels of 0.9em is 10.5px, not 14.4. Convert between all three and see the compounding.
Design💻SVG to CSS Background
Base64 makes an SVG 33% bigger and kills gzip. Percent-encoding only what CSS actually chokes on is smaller, still valid, and still readable.
Developer