Glass and Border Effects
Frosted glass, gradient borders and glows for cards and hero sections. Real CSS with a live preview, ready to copy as CSS, Tailwind or HTML.
Open in editorCSS effects and layouts
Fluid Type Scale Generator (CSS clamp)
Font sizes that grow with the screen width: a modular type scale as CSS clamp(), with CSS variables and a Tailwind theme to copy.
Open the generatorRuns right in your browser. Your graphics are made on your device.
Start from a preset
Pick a preset and it opens right in the editor, ready to adjust.
What is it?
A fluid type scale defines every font size of a website, from small print to the big headline. Each step is larger than the one before by a fixed ratio, and all steps grow smoothly with the screen width. The typography fits a phone and a large monitor without breakpoints.
What you can use it for
New website
Set up the typography once and use the same steps everywhere. Headlines, body text and labels stay in proportion on every device.
Design system
The steps become variables like --step-2 or Tailwind classes like text-xl. Design and code speak the same language.
Fewer breakpoints
Instead of overriding font sizes in three media queries, the browser works out the right size by itself.
How it works
Enter the smallest and the largest screen width, plus the base size and the ratio for both ends. The preview shows every step at a width you choose. Then copy the CSS variables, the ready-made classes or the Tailwind theme into your project.
Try the Fluid Type Scale Generator nowTips
- A smaller ratio on phones and a larger one on desktops gives big headlines impact without breaking them on small screens.
- Stick with rem as the unit. Then text grows when someone sets a larger font size in the browser.
- Pick sizes as names when you work with Tailwind. The theme then replaces default sizes like text-lg directly.
FAQ
- How does clamp() work for font sizes?
- clamp() takes a minimum size, a preferred value and a maximum size. The preferred value is rem plus vw and grows with the screen width. Below the smallest width the text stays small, above the largest it stays large.
- Why rem plus vw and not vw alone?
- Text in pure vw units does not grow when you zoom. The rem part keeps zoom and the browser font size working. As a rule of thumb, if the largest size of a step is at most 2.5 times its smallest, text can always be zoomed to 200%.
- Which browsers support clamp()?
- All current browsers since 2020: Chrome, Edge, Firefox and Safari. For very old browsers you can put a fixed size before the variable.
- How do I use the scale with Tailwind?
- Copy the Tailwind v4 theme into your CSS file. Tailwind turns every --text-* variable into a class, for example text-xl. With sizes as names, the scale replaces Tailwind's default sizes.
Related generators
All generators in CSS effects and layouts
Bento Grid
Rounded tiles of different sizes in a grid, without gaps. For feature sections, portfolios and social graphics, as CSS Grid, Tailwind or an image.
Open in editor
CSS Shadow Generator
Soft, layered shadows for cards and buttons. Real CSS preview, export as box-shadow, Tailwind or drop-shadow.
Open in editor
Animated Gradient Generator
Moving, rotating and color-shifting gradients and floating blobs as pure CSS. Copy CSS, Tailwind or HTML, or export PNG and GIF.
Open in editor
Section Divider Generator
Waves, arcs, slants, peaks and more as the transition between two website sections. One SVG that fits any width, with HTML and CSS to copy.
Open in editor
CSS Gradient
Linear, radial and conic gradients with smooth OKLCH transitions. Export as CSS, SVG or image.
Open in editor