CSS Functions
Explore calc(), min(), max(), and clamp() functions that enable mathematical operations in CSS.
Hover over the elements below to see CSS functions in action!
50px
5vw
1.5
calc() Function
Addition: calc(50px + 2rem)
Subtraction: calc(100% - 30px)
Multiplication: calc(1rem * 2.5)
Division: calc(100vw / 4)
Complex: calc((100% - 40px) / 3 + 10px)
min() Function
Basic: min(300px, 50vw)
Multiple: min(200px, 30vw, 50%)
With calc: min(calc(100% - 20px), 400px)
Responsive: min(80vw, 600px)
max() Function
Basic: max(200px, 20vw)
Multiple: max(100px, 10vw, 25%)
With calc: max(calc(50% + 10px), 150px)
Responsive: max(50vw, 300px)
clamp() Function
Basic: clamp(100px, 25vw, 300px)
Font: clamp(1rem, 4vw, 2.5rem)
With calc: clamp(50px, calc(10vw + 1rem), 200px)
Complex: clamp(calc(100px + 1rem), 50vw, calc(500px - 2rem))
Spacing: clamp(1rem, 5vw, 4rem)
Combined Functions
Nested: max(min(50vw, 400px), 200px)
Complex: clamp(100px, calc(50vw - 2rem), max(300px, 25vw))
Grid: repeat(auto-fit, minmax(min(250px, 100%), 1fr))