Clipping restricts what can pass a boundary. For numeric UI values, this is clamping: keep a preferred value when it is in range, otherwise use a defined minimum or maximum. In CSS, clamp(min, preferred, max) expresses that rule directly, making responsive values fluid without becoming unusably small or large. section 3.2.3 section 6.5.6
Think of a responsive heading sized from viewport width. A raw 8vw value grows with the screen, but it may become too small on a phone or absurdly large on a wide display. clamp(32px, 8vw, 64px) uses 8vw in the middle range, holds at 32px below it, and stops at 64px above it. The same pattern works for container widths and other layout dimensions. section 3.2.3 section 6.5.2
Listing 3.7 Using clamp() to constrain a font size
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 80px 20px;
}
.hero h1 {
font-size: clamp(32px, 8vw, 64px); #1
}
.hero p {
font-size: clamp(16px, 4vw, 24x); #2
}
Use the listing to compare minimum, viewport-driven preferred, and maximum font sizes in one declaration. section 3.2.3
min() and max() enforce one side of the range: min(8vw, 64px) prevents growth beyond 64px, while max(32px, 8vw) prevents shrinkage below 32px. clamp() combines both constraints; its logic can be written as max(MIN, min(VAL, MAX)). section 3.2.3
For a custom fluid size, work from desired endpoints rather than guessing:
- Choose the viewport widths and resulting sizes you want, such as 400px at a 500px viewport and 800px at a 1000px viewport. section 6.5.3
- Calculate the linear preferred value from the slope, then use it between the chosen lower and upper bounds. section 6.5.3
- Write the bounded result as width: clamp(400px, 80vw, 800px). section 6.5.3
width: clamp(400px, 80vw, 800px);
This declaration shows a viewport-based width that scales only within its 400px-to-800px range. section 6.5.3
Clipping also has a visual meaning. clip-path keeps only the portion of an element inside a shape and hides the rest. A polygon uses percentage points in the element’s coordinate system; the browser connects those points and clips outside the resulting shape. This is geometric clipping rather than numeric value clamping. section 10.4.1
Listing 10.7 Using clip-path to define a polygon
div {
width: 200px;
height: 200px;
background-color: hsl(23 100% 40%);
}
.diamond {
clip-path: polygon(
50% 0%,
100% 50%,
50% 100%,
0% 50%
);
}
.arrow {
clip-path: polygon(
0% 30%,
60% 30%,
60% 0%,
100% 50%,
60% 100%,
60% 70%,
0% 70%
);
}
The polygon coordinates turn ordinary square elements into a diamond and an arrow by hiding everything outside each defined shape. section 10.4.1
Use clamping when a value must scale smoothly yet remain safe, readable, or proportional. Use visual clipping when an element needs a shaped visible region. For custom sliders, clamping cursor-derived values to predefined limits helps keep interaction predictable. section 8.2.2 section 13.2
