CSS clamp generator
Enter screen widths and sizes for small and large screens to generate CSS that smoothly changes text size or spacing. Preview px or rem output, then copy the CSS and Tailwind code or save them as text.
What you can do
Specify 2 width and size pairs
Specify sizes for a small viewport and a large viewport. Supports 6 types: font size, gaps, padding, margin, width and height.
Generate code in px or rem
Enter all values in px, and choose px or rem for output. Get a CSS declaration and Tailwind arbitrary property code.
Check the generated CSS immediately
Applies the CSS to two elements in the preview. Check how text and spacing appear at the current frame width.
How to use
Choose the property to change
Choose the CSS property you want to specify, such as font-size for text size or gap for spacing between elements.
Enter two viewport widths and sizes
Enter each of the two viewport widths and its size in px. The size for the smaller viewport must be no greater than the size for the larger one.
Check the output unit and generate
Choose px or rem in advanced settings. For rem, also check the base font size before pressing Generate CSS.
Preview and get the code
Copy the CSS and paste it where you will use it. Open the Tailwind code to retrieve it. You can also copy all 2 items together or save them as text.
Useful when
Change heading sizes smoothly
When you want to set text sizes for narrow and wide viewports and vary them continuously between those widths, rather than in steps.
Adjust spacing to the viewport
When you want card gaps or inner padding to vary within the minimum and maximum sizes you set.
Specifying fluid sizes and reading the preview
The 3 values in clamp
clamp is a CSS function that specifies a minimum value, a fluid value and a maximum value. The generated formula connects two reference points with a linear expression and limits sizes outside the range to the endpoint sizes.
Input in px; output in px or rem
Both viewport widths and sizes are entered in px. For rem output, the sizes and fixed term are divided by the base font size, while the vw coefficient for viewport width is used unchanged.
Match the rem base to where the code is used
By default, the code treats 1rem as 16px. If the root element's font size differs where the code is used, the endpoint sizes and how the size changes will also differ. Check it where you use it too.
The preview frame defines the viewport width
The preview is an independent display frame. It calculates vw from the width inside the frame, rather than the width of the entire screen. Depending on the property, the same generated CSS is applied to text, the gap between the two elements, spacing or element dimensions.
Also check where the code is used
The preview text and structure are fixed. Also check the fonts, long text, line wrapping and browser text enlargement where you use the code. The Tailwind code uses the arbitrary property format; also check that it is detected and generated where you use it.
Frequently asked questions
What happens outside the specified viewport width range?
Widths narrower than the smaller specified width use the minimum size, and widths wider than the larger specified width use the maximum size. For rem, you must use the same base font size as when the code was generated.
What is the base font size for rem?
It specifies how many px are used to calculate 1rem. The default is 16px, and you can change it to 1–1000px in advanced settings. Match the font size of the root element where you will use the code.
Can I specify equal sizes or negative values?
Set the minimum and maximum to the same value for a constant size. Negative values are allowed only for margin. Sizes that decrease as the viewport gets wider are not supported.
Do changes to properties or values apply immediately?
Changing them clears the generated code and preview. Press Generate CSS to update them. The same applies when you change the output unit or base font size.
Can I change the preview text?
The sample text and Aa 123 are both fixed. There is no text editing feature. Also check the actual text and display width on the page that uses the generated CSS.
Input and results
- Viewport width
- 1–100000px. The smaller viewport width must be less than the larger one. Decimals are also accepted.
- Size
- 0–10000px. Only margin can go down to −10000px. The size for the smaller viewport must be no greater than the size for the larger one.
- Output
- A CSS declaration and a Tailwind arbitrary property. Save all 2 items as css-clamp-generator.txt.
- Precision
- The generated formula uses coefficients with up to 13 significant digits. An error occurs for widths so close together that the rounded formula cannot reproduce the reference points, for example.