Gerador de CSS Clamp()
Gere valores CSS fluidos e responsivos com clamp(). Escala suavemente entre tamanhos mínimo e máximo ao longo dos intervalos de viewport.
font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);
Como usar esta ferramenta
- 1
Enter the minimum size in pixels (the value at and below your small viewport).
- 2
Enter the maximum size in pixels (the value at and above your large viewport).
- 3
Set the min and max viewport widths in pixels that define where scaling starts and stops.
- 4
Read the generated clamp() declaration and click Copy to paste it into your stylesheet.
O que é o Gerador de CSS Clamp()?
A função CSS clamp(mín, preferido, máx) mantém um valor delimitado ao mesmo tempo que permite que ele escale de forma fluida dentro do intervalo. Perfeita para tipografia responsiva que cresce suavemente com a largura do viewport em vez de saltar nos pontos de quebra. Esta ferramenta calcula a fórmula correta do valor preferido a partir dos seus tamanhos de fonte mínimo/máximo e das larguras do viewport.
Casos de uso comuns
Building fluid headings that grow from 24px on mobile to 48px on desktop without writing media-query breakpoints.
Setting responsive body copy that stays readable between a 320px phone and a 1200px laptop.
Scaling section padding or gap values fluidly so layouts breathe proportionally across screen sizes.
Replacing a stack of font-size overrides at 480px, 768px, and 1024px with one clamp() declaration.
Generating clamp() values for a design system so spacing and type scale consistently from one formula.
Quickly checking the px and vw math for a fluid value you sketched out in a design tool like Figma.
Perguntas frequentes
Compatibilidade com navegadores?▼
Ferramentas relacionadas
Conversor de Cores (HEX/RGB/HSL)
Converta cores entre os formatos HEX, RGB e HSL. Escolha uma cor visualmente ou insira os valores manualmente.
Gerador de Box Shadow CSS
Crie valores de box-shadow em CSS de forma visual. Visualize em tempo real e copie o CSS gerado.
Gerador de Gradientes CSS
Crie gradientes CSS lineares e radiais. Escolha as cores de forma visual e copie o CSS gerado.
Gerador de Curvas de Aceleração Cubic Bezier
Crie curvas de aceleração cubic-bezier para CSS. Inclui predefinições padrão.
Gerador de Paletas de Cores
Gere paletas de cores harmoniosas a partir de qualquer cor base. Suporta esquemas complementares, análogos, triádicos e monocromáticos.
Gerador de Border Radius CSS
Crie valores complexos de border-radius em CSS de forma visual. Controle independente de cada canto.