Loading content...
Turn three design tokens into fluid CSS for type, spacing, and layout. Scrub the viewport before you copy.
All values are in pixels.
Responsive type that stays in bounds.
Scrub the viewport to see the preferred value interpolate between your minimum and maximum.
Copy-ready CSS
clamp()
font-size: clamp(16px, calc(13.71px + 0.71vw), 40px);
Discover more utility-driven tools designed to enhance your workflow and technical excellence.
Generate a complete Tailwind CSS shade scale (50–950) from any base color. Live preview, copy the config, or export as CSS variables.
Build linear and radial gradients with unlimited color stops, adjustable angles, and a live preview. Copy production-ready CSS instantly.
Create layered box shadows visually — offset, blur, spread, color, inset — with curated presets and copy-ready CSS output.