Calculateur Clamp

Generez des valeurs CSS clamp() responsives pour la typographie et l'espacement fluides. Definissez viewport et valeurs min/max, previsualisation a chaque breakpoint.

Common Use Cases

clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem)

Viewport Range

Min Viewport: 375px

Max Viewport: 1440px

Value Range

Min Value: 16px (1.000rem)

Max Value: 24px (1.500rem)

Root Font Size: 16px

How it works

Minimum16pxat ≤ 375px

Preferred0.8239rem + 0.7512vwfluid scaling

Maximum24pxat ≥ 1440px

Values at each breakpoint

375px

16.0px

480px

16.8px

640px

18.0px

768px

19.0px

1024px

20.9px

1280px

22.8px

1440px

24.0px

Live preview

The quick brown fox jumps over the lazy dog

16-24

Show Tailwind

CSS

font-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);

/* Or as a CSS variable */
--fluid-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);

Tailwind CSS

<div class="text-[clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem)]">
  ...
</div>

Explorer d'autres Goodies

D'autres outils gratuits par Eguth Studio qui pourraient vous plaire.

Voir tous les Goodies

Layout

Generateur de grilles CSS

Construisez des grilles CSS visuellement. Ajustez colonnes, lignes et espacements, puis copiez le code.

Try it ->

Layout

Previsualisation border-radius

Visualisez et ajustez des valeurs complexes de border-radius sur un apercu en direct.

Echelle typographique

Generez une echelle typographique responsive a partir d'une taille de base et d'un ratio. Export CSS variables, clamp() fluid et config Tailwind.

Try it ->

Layout

Flexbox Playground

Construisez des layouts flexbox visuellement. Controlez direction, justify, align, wrap, gap et les proprietes de chaque item.

Try it ->

NewLayout

Generateur de systeme d'espacement

Construisez une echelle d'espacement coherente a partir d'une unite de base. Generez des echelles lineaires, geometriques ou Fibonacci avec CSS variables et config Tailwind.

Try it ->

NewLayout

CSS Transform Playground

Combinez des transforms CSS 2D et 3D visuellement — translate, rotate, scale, skew et perspective avec apercu en direct et controle du transform-origin.

Try it ->

Voir tous les Goodies