Efeitos visuais

Profundidade e textura

• Sobreponha várias sombras para criar efeitos de profundidade suaves e realistas.
• Use filter: drop-shadow() em vez de box-shadow para formas não retangulares ou PNGs transparentes.
• Use mix-blend-mode e background-blend-mode para sobreposições de iluminação (limite o escopo com isolation: isolate)

.hero {
  background-image: url('texture.png'), linear-gradient(to bottom, #fff, #eee);
  background-blend-mode: soft-light;
}

Gradientes e color-mix()

Use in oklch ou in oklab para especificar explicitamente o espaço de cores de interpolação para gradientes ou color-mix().

• in oklch preserva melhor o croma, mas pode sair mais facilmente da gama do dispositivo, especialmente para diferenças maiores entre as cores
• in oklab permanece na gama com mais facilidade (considerando endpoints na gama), mas pode criar cores dessaturadas no meio, especialmente ao interpolar entre matizes opostos.
• NÃO use in srgb, a menos que tenha um motivo específico para isso (por exemplo, se estiver criando um seletor de cores que precisa interpolar em srgb).

Fallback

Alguns navegadores anteriores a 2024 não são compatíveis com o espaço de interpolação de cores de gradiente. Para oferecer suporte a esses navegadores, use o token somente quando o uso dele for seguro, definindo uma variável:

:root {
  --in-oklab: ;
  --in-oklch: ;
}

@supports (linear-gradient(in oklab, white, black)) {
  :root {
    --in-oklab: in oklab;
    --in-oklch: in oklch;
  }
}

Em seguida, use como:

.card {
  background: linear-gradient(to bottom var(--in-oklab), var(--accent-color), var(--darker));
}

• Importante: se você usar essa técnica, verifique se há sempre um preâmbulo de gradiente não vazio sem ela. Caso contrário, haverá um erro de sintaxe em navegadores mais antigos.
• Você NÃO precisa disso para o color-mix(). Se um navegador for compatível com color-mix(), ele também será compatível com o argumento in <color-space>.

Padrões

Muitos padrões podem ser criados com gradientes CSS + paradas rígidas, que podem ser mais flexíveis e ter melhor desempenho do que SVGs ou imagens externas, já que podem ter acesso a variáveis e comprimentos CSS do contexto ao redor. Não é necessário repetir a posição duas vezes. Basta usar 0 ou 0%, e a correção de gradiente vai fazer o ajuste automático.

Confira alguns exemplos abaixo.

Listras verticais de 1em de largura cada:

background: linear-gradient(to right, var(--color-1) 50%, var(--color-2) 0) 0 / 2em;

Listras diagonais de 1em de largura cada:

background: repeating-linear-gradient(-45deg, var(--color-1) 0 1em, var(--color-2) 0 2em);

Padrão de tabuleiro de xadrez com quadrados de 1em:

background: repeating-conic-gradient(var(--color-1) 0 25%, var(--color-2) 0 50%) 0 / 2em 2em;

Poá com pontos de raio .5em espaçados em 2em (horizontal/verticalmente — multiplique por sqrt(2) para distância diagonal):

--distance: 2em;
--radius: .5em;
--polka: radial-gradient(circle, var(--color-1) var(--radius), transparent calc(var(--radius) + 1px));
background: var(--polka) 0 0, var(--polka) var(--distance) var(--distance) var(--color-2);
background-size: calc(var(--distance) * 2) calc(var(--distance) * 2);

Gráfico de pizza simples:

.pie {
  --p: 80%;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--color-1) var(--p), transparent 0%) var(--color-2);
}

Importante: ao usar gradientes para renderizar gráficos, garanta que haja um substituto textual para leitores de tela. OBRIGATÓRIO: você PRECISA fornecer uma tabela de dados semânticos como alternativa acessível, conforme detalhado nas Diretrizes de programação de acessibilidade, nas diretrizes de texto e mídia alternativos.