yukt.tools
responsive css

CSS Clamp Calculator

Generate a responsive CSS clamp() value from minimum and maximum sizes and viewport widths.

Fluid size inputs

Max value must be at least the min value. Max viewport must be larger than min viewport.

Viewport range
Value unit
Samples
Ready to generate.

Generated output

Run valid values to create CSS.

clamp()

clamp(...) appears here

CSS

:root {
  --fluid-size: clamp(...);
}

No clamp generated

Enter the value range, viewport range, and unit to create copyable CSS.

Related tools and guides
design

Aspect Ratio Calculator

Simplify aspect ratios and calculate scaled width or height.

open
design

Color Converter

Convert HEX, RGB, and HSL colors into copy-ready values.

open
design

Contrast Checker

Check foreground and background colors against WCAG AA and AAA contrast thresholds.

open
design

Spacing Scale Generator

Generate CSS spacing design tokens from a pixel base, rem base, and token prefix.

open