Design fluido em 2026: como progress(), light-dark() e alpha() mudaram o jeito que eu escrevo o CSS de uma marca

Design fluido é quando o layout, a tipografia e a cor se ajustam de forma contínua ao espaço disponível, em vez de pular de um breakpoint para outro. Em setembro de 2026, as funções progress(), alpha() e as imagens dentro de light-dark() viraram Baseline nos três grandes navegadores, e isso me permitiu fazer quase tudo isso em CSS puro. Neste texto eu conto como estou usando cada uma nos projetos do Studio Seu.

O que mudou no design fluido em setembro de 2026

O resumo mensal do web.dev, publicado em 2 de outubro de 2026, trouxe uma lista que eu li duas vezes. Os pontos que mais me interessam:

• progress() virou Baseline com o Firefox 155 e o Safari 27 (o Chrome já tinha desde a versão 138). Ela devolve um número entre 0 e 1 que diz onde um valor está entre um mínimo e um máximo.
• alpha(), a função de cor relativa que ajusta só a transparência de uma cor, chegou ao Baseline com Chrome 151, Firefox 155 e Safari 27.
• Imagens dentro de light-dark() passaram a funcionar no Chrome 150, Firefox 150 e Safari 27. Agora dá para trocar uma imagem de fundo conforme o tema claro ou escuro sem media query.
• font-width, o substituto do antigo font-stretch, também entrou na lista, com Chrome 154 e Firefox 155.
• E o Chrome 154, lançado em 22 de setembro, trouxe text-decoration-inset, que controla o quanto um sublinhado avança ou recua em relação ao texto.

Separadas, são novidades pequenas. Juntas, elas mudam a forma como eu escrevo a camada visual de uma marca.

Por que eu parei de pensar em breakpoints

Durante anos, aqui no Studio Seu eu desenhei sites em três ou quatro larguras fixas: celular, tablet, notebook, monitor grande. O problema é que ninguém vive nessas larguras. Na minha experiência, a tela mais comum entre os clientes dos meus clientes é justamente a que fica entre dois breakpoints, onde o título quebra feio ou o espaçamento parece apertado.

Com progress(), eu escrevo uma regra só: "entre 360 e 1440 pixels de largura, vá de A até B". O número que a função devolve serve para interpolar tamanho de fonte, espaçamento, raio de borda, opacidade e até cor. Em vez de quatro estados, eu tenho uma transição contínua. O site para de "pular".

Como eu uso progress() na prática

O uso mais óbvio é tipografia. Eu já fazia isso com clamp(), mas clamp() só limita um valor. Com progress() eu calculo uma vez a posição relativa da tela e reaproveito esse número em várias propriedades. Num projeto recente de marca, o mesmo fator controla o tamanho do título, a largura do respiro lateral e a intensidade de uma sombra. Quando a tela cresce, tudo cresce no mesmo ritmo, e a composição mantém a proporção que eu desenhei no Figma.

Minha opinião: isso aproxima muito o CSS do jeito que um designer pensa. A gente não desenha "tablet". A gente desenha uma relação entre elementos.

light-dark() com imagens: o modo escuro finalmente completo

Eu sempre tive uma implicância com modo escuro feito pela metade: a interface fica escura, mas a foto de fundo ou a textura da marca continua pensada para o fundo claro. Com imagens dentro de light-dark(), eu passo duas versões da mesma imagem numa linha só, e o navegador escolhe conforme a preferência da pessoa.

Na prática, isso significa que agora eu entrego, junto com a identidade visual, as variações claras e escuras das texturas, padrões e ilustrações de fundo. Virou item do checklist de entrega, não um extra.

alpha(): uma cor de marca, todas as transparências

Antes, cada tom translúcido da paleta virava uma variável nova no design system: a cor principal a 10%, a 20%, a 60%. Com alpha(), eu guardo só a cor de marca e derivo a transparência na hora. O design system fica menor, e quando o cliente ajusta a cor principal, todas as variações acompanham sem eu precisar caçar valor perdido no código.

Isso conversa direto com o que eu já defendo sobre paleta em OKLCH: menos valores soltos, mais regras.

Os detalhes que fazem a marca parecer cuidada

font-width e text-decoration-inset parecem detalhes, e são. Mas é nesses detalhes que uma marca parece desenhada ou parece montada. Com font-width, eu aproveito melhor fontes variáveis que têm eixo de largura, estreitando o título em telas pequenas sem trocar de família. Com text-decoration-inset, o sublinhado dos links finalmente respeita o desenho da letra, do jeito que eu faria num impresso.

Cuidados antes de sair usando

• Baseline "newly available" não é universal. Ainda existe gente em navegador antigo. Eu sempre escrevo um valor fixo antes, como base, e deixo a versão fluida por cima.
• Fluido não é desculpa para falta de direção. Eu ainda defino os extremos com cuidado: o menor e o maior estado precisam estar bonitos por conta própria.
• Teste com zoom. Tipografia fluida mal calculada pode atrapalhar quem aumenta o texto. Acessibilidade continua sendo critério de aprovação.

Perguntas frequentes

O que é design fluido na web?

É uma abordagem em que tamanhos, espaços e cores mudam de forma contínua conforme a tela, em vez de mudarem só em pontos fixos. O resultado é um layout que fica bom em qualquer largura, não só nas que foram desenhadas.

progress() substitui clamp()?

Não, eles se complementam. clamp() limita um valor entre mínimo e máximo; progress() diz em que ponto do intervalo você está, e esse número pode ser reaproveitado em várias propriedades.

Já posso usar light-dark() com imagens em produção?

Sim, desde setembro de 2026 ele é Baseline no Chrome, Firefox e Safari. Eu só recomendo manter uma imagem padrão antes, para navegadores desatualizados.

Isso muda o custo de um projeto de site?

Na minha experiência, reduz. Menos breakpoints e menos variáveis de cor significam menos código para manter e menos retrabalho quando a marca evolui.

Conclusão

Eu gosto de momentos em que o CSS alcança o jeito como designers pensam, e setembro de 2026 foi um deles. Hoje, aqui no Studio Seu, eu escrevo a camada visual de uma marca como um sistema de relações, não como uma coleção de telas. Se o seu site ainda "pula" entre tamanhos de tela ou tem um modo escuro pela metade, me chama para uma conversa: é exatamente esse tipo de ajuste que eu gosto de resolver.