🦀 CSS Clamp() Property Explorer

A comprehensive guide to all CSS properties that support clamp() function

💡 Resize your browser to see clamp() values adapt in real-time

📝 Typography & Text Properties

font-size

clamp(0.875rem, 2.5vw, 2rem)

font-size: clamp(0.875rem, 2.5vw, 2rem);

line-height

Multiple lines of text to demonstrate responsive line-height using clamp(1.2, 1.5vw, 1.8)

line-height: clamp(1.2, 1.5vw, 1.8);

letter-spacing

LETTER SPACING DEMO

letter-spacing: clamp(0.05em, 0.1vw, 0.2em);

word-spacing

Word spacing between words

word-spacing: clamp(0.2em, 0.5vw, 1em);

📦 Box Model Properties

width

Responsive width
width: clamp(200px, 50vw, 600px);

height

Height
height: clamp(100px, 20vh, 300px);

padding

Responsive padding
padding: clamp(0.5rem, 3vw, 3rem);

margin

Margin demo
margin: clamp(0.5rem, 2vw, 2rem);

📐 Layout Properties

gap

Item 1
Item 2
Item 3
gap: clamp(0.5rem, 2vw, 3rem);

flex-basis

Flexible
Fixed
flex-basis: clamp(100px, 30%, 300px);

grid-template-columns

A
B
C
grid-template-columns: repeat(3, clamp(80px, 1fr, 200px));

column-gap / row-gap

1
2
3
4
column-gap: clamp(0.5rem, 1.5vw, 2rem);
row-gap: clamp(0.25rem, 1vw, 1.5rem);

🎨 Border & Visual Properties

border-radius

Rounded corners
border-radius: clamp(4px, 1vw, 20px);

border-width

Border width
border-width: clamp(1px, 0.2vw, 5px);

outline-width

Outline width
outline-width: clamp(2px, 0.3vw, 6px);

box-shadow

Shadow blur
box-shadow: 0 0 clamp(5px, 1vw, 20px) rgba(0, 0, 0, 0.3);

📍 Position Properties

top, right, bottom, left

Positioned
top: clamp(10px, 2vw, 50px);

inset

Inset
inset: clamp(10px, 2vw, 40px);

🚀 Advanced Properties

scroll-padding

Scroll container with padding
scroll-padding: clamp(1rem, 3vw, 4rem);

text-indent

This paragraph has a responsive text indent that scales with the viewport width.

text-indent: clamp(1rem, 4vw, 6rem);

transform values

Transform me!
transform: translateX(clamp(0px, 5vw, 100px));

filter values

Filtered element
filter: blur(clamp(0px, 0.2vw, 3px));