CSS e web

CSS e web

Gradiente linear em CSS: o guia completo do linear-gradient()

7 min de leitura

Cada parte do linear-gradient() explicada com um exemplo ao vivo ao lado do código, da direção padrão às paradas duras, brilhos em camadas e misturas OKLCH mais suaves.

CSS e web

Gradiente radial em CSS: formas, tamanhos e posições

5 min de leitura

O radial-gradient() desenha cor para fora a partir de um ponto. Aqui está cada parte dele, com exemplos ao vivo, mais os truques de camadas por trás de brilhos suaves, holofotes e vinhetas.

CSS e web

Gradiente cônico em CSS: círculos, gráficos de pizza e brilho

5 min de leitura

O conic-gradient() varre a cor em torno de um ponto como o ponteiro de um relógio. Essa única ideia desenha círculos de cores, gráficos de pizza e de rosca, brilho metálico e explosões de raios.

CSS e web

Gradiente de malha em CSS: como criar um com camadas radiais

6 min de leitura

Não existe mesh-gradient() em CSS. Aqui está o método de camadas que imita um de forma convincente, o desfoque e o grão que o acabam e quando uma imagem ou um shader é a melhor escolha.

CSS e web

Texto com gradiente em CSS, bem feito

5 min de leitura

Três linhas de CSS colocam um gradiente dentro das suas letras. Deixá-lo legível, robusto e de bom gosto leva mais algumas, e saber quando deixar o texto liso.

CSS e web

Borda com gradiente em CSS: quatro jeitos de desenhar uma

5 min de leitura

O border-color não aceita gradiente, então todo contorno com gradiente é uma solução alternativa. Aqui estão as quatro que importam, o que cada uma pode e não pode fazer e qual escolher.

CSS e web

Fundos com gradiente animado em CSS, do jeito certo

5 min de leitura

Gradientes não podem ser animados diretamente, mas tudo ao redor deles pode. Quatro técnicas, o que cada uma custa ao navegador e como manter o movimento calmo e opcional.

CSS e web

Gradiente CSS com OKLCH: interpolação para misturas mais suaves

5 min de leitura

A maioria dos gradientes sem graça, com o meio cinza, não é um problema de cor, mas de matemática. Duas palavras, in oklch, mudam onde o navegador faz a conta.

CSS e web

Textura de ruído em CSS: grão em gradientes com SVG

5 min de leitura

Uma camada leve de ruído esconde o banding e faz a cor lisa da tela parecer impressão ou filme. Aqui está o filtro SVG por trás disso, ajustado e pronto para colar.

CSS e web

Gradiente no Tailwind: classes linear, radial e cônica na v4

5 min de leitura

O Tailwind v4 renomeou seus utilitários de gradiente, adicionou ângulos e gradientes radiais e cônicos e mudou a mistura padrão para oklab. Aqui está o sistema inteiro, com o CSS que cada classe gera.

CSS e web

Gradientes SVG: linear, radial, traços, texto e máscaras

6 min de leitura

O SVG tem seu próprio sistema de gradientes, mais antigo que os gradientes CSS e capaz de coisas que eles não fazem: colorir um traço, preencher uma palavra, compartilhar um gradiente entre várias formas e esmaecer qualquer coisa com uma máscara.

CSS e web

Botões com gradiente em CSS que parecem premium

5 min de leitura

A maioria dos botões com gradiente parece barata pelos mesmos poucos motivos: matizes demais, um hover que pula e texto que some na ponta clara. Aqui está a receita que evita os três.

CSS e web

Desempenho de gradientes CSS: gradientes deixam o site lento?

6 min de leitura

Um gradiente CSS estático é quase de graça. Os custos vêm do que as pessoas fazem com gradientes: desfoques enormes, fundos que repintam ao rolar e animações que nunca param. Veja como distinguir.

CSS e web

Padrões CSS com gradientes repetidos

5 min de leitura

Paradas de cor duras transformam gradientes em formas, e o background-size transforma formas em ladrilhos. Com essas duas ideias você desenha os padrões clássicos em poucas linhas, sem arquivos de imagem.

CSS e web

Gradientes no Figma: dicas para resultados mais suaves

6 min de leitura

O Figma faz um gradiente em dois cliques e um bom gradiente em vinte. Aqui está o caminho rápido pelo editor de gradiente, mais as correções para meios acinzentados, banding e CSS que não combina.

CSS e web

Shaders de gradiente em WebGL, explicados para designers

7 min de leitura

Alguns gradientes na web derivam, brilham e cintilam de um jeito que nenhuma imagem ou regra CSS consegue. São shaders. Veja como funcionam, em palavras que um designer pode usar.

CSS e web

Gradiente em e-mail: o que funciona no Gmail e no Outlook

6 min de leitura

Gradientes ficam lindos em um navegador e imprevisíveis em uma caixa de entrada. Monte-os em camadas, e todo leitor recebe algo com cara de intencional.

CSS e web

Imagens OG dinâmicas: gere prévias de link automaticamente

7 min de leitura

Fazer à mão uma imagem de prévia para cada página não escala, e uma imagem genérica para o site inteiro desperdiça a imagem mais vista que você tem. Gere-as.