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 Spacing Scale Generator
Spacing that grows with the screen width: t-shirt sizes from 3xs to 3xl as CSS clamp(), with CSS variables, utility classes and a Tailwind theme.
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 spacing scale is a set of space values (padding, gaps, margins) that grow smoothly with the screen width. Each size is a fixed multiple of a base space and is written as CSS clamp(), so small screens get tighter and large screens get more generous spacing without breakpoints.
What you can use it for
Consistent layouts
One scale for all gaps keeps a site calm and consistent, from buttons to whole sections.
Fewer breakpoints
Spacing that grows with the viewport replaces many media queries for padding and margins.
Design tokens
The variables fit straight into a design system or a Tailwind v4 theme.
How it works
Set the smallest and largest screen width and the base space at both. Choose how many sizes you need below and above the base, and add pairs that jump from one size to the next across the range. Check the sizes at any width in the preview, then copy CSS variables, utility classes or a Tailwind theme.
Try the Fluid Spacing Scale Generator nowTips
- Pair the spacing scale with the fluid type scale and use the same viewport range for both.
- Pairs such as s-l are great for section padding that should change a lot between phone and desktop.
- Keep the base space close to your body text size, often 16 to 20 px.
FAQ
- How are the sizes calculated?
- Every size is a fixed multiple of the base: 3xs is a quarter, s is the base, m is 1.5 times, l twice, up to 3xl at six times. The base itself grows linearly between the two screen widths.
- What are pairs?
- A pair goes from one size on small screens to a larger size on large screens, for example from s to l. It grows faster than a single size.
- Does it work with Tailwind?
- Yes. The Tailwind theme export defines --spacing-* variables for Tailwind v4, so classes like p-s, gap-m or mt-xl use the fluid values.
- Is clamp() safe for zoom?
- Yes. The values combine rem and vw, so they still grow when people zoom the page.
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
Fluid Type Scale Generator
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 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