Novo Livro!
Categorias
Ferramentas
Projetos
Cor

Borda cinza vs semitransparente

Escolha a cor e a opacidade da borda: a prévia põe lado a lado o cinza sólido e a borda semitransparente sobre quatro fundos, com a cor que cada uma mostra em cada um.

Funciona em todos os navegadores atuais Ver no Baseline

Ajuste

15%
1px

Veja

rgb(0 0 0 / 15%)
  • Branco referência
    Cinza sólido: rgb(217 217 217)
    Semitransparente: rgb(217 217 217)
  • Areia
    Cinza sólido: rgb(217 217 217)
    Semitransparente: rgb(207 198 179)
  • Azul
    Cinza sólido: rgb(217 217 217)
    Semitransparente: rgb(31 84 200)
  • Escuro
    Cinza sólido: rgb(217 217 217)
    Semitransparente: rgb(20 20 23)

Copie o código

CSS 
.element {
  /* Sem isto, o fundo da caixa passa sob a borda e ela se mistura com ele. */
  background-clip: padding-box;
  /* Sobre o fundo branco, igual a rgb(217 217 217); nos outros fundos, acompanha a cor. */
  border: 1px solid rgb(0 0 0 / 15%);
}

O problema

O cinza da borda costuma ser escolhido sobre fundo branco: rgb(217 217 217) parece uma linha discreta. Quando o mesmo componente vai para um fundo bege, colorido ou escuro, aquele cinza continua igual e passa a parecer uma linha clara e fria, que não pertence ao fundo.

A saída comum é criar um cinza para cada fundo, e o número de tokens de borda cresce a cada tema novo.

Como funciona

Uma borda semitransparente não tem cor própria: ela escurece (ou clareia) o que está atrás na mesma medida. A cor que aparece é calculada canal a canal:

cor vista = borda × α + fundo × (1 − α)

Com preto a 15% sobre o branco, cada canal dá 0 × 0,15 + 255 × 0,85 ≈ 217: o mesmo rgb(217 217 217) do cinza sólido. Sobre o azul, a mesma borda dá um azul mais escuro.

Por padrão, o fundo de uma caixa se estende por baixo da borda (background-clip: border-box). Aí a borda semitransparente se mistura com o fundo da própria caixa, e não com o que está atrás dela. O background-clip: padding-box corta o fundo na borda e deixa a mistura acontecer com o fundo de fora.

Em fundo escuro, borda preta semitransparente quase some. Para temas escuros, a mesma ideia vale com branco: rgb(255 255 255 / 15%) clareia qualquer fundo escuro na mesma medida. Com uma borda clara, a prévia tira o cinza sólido do fundo escuro, já que sobre o branco nenhuma das duas apareceria.

Quando usar

  • Divisores e bordas de cards que aparecem sobre fundos diferentes.
  • Componentes que vão para temas claros e escuros sem um cinza por tema.
  • Bordas sobre imagem ou gradiente, em que nenhum cinza sólido combina com tudo.
  • Reduzir a lista de tokens de borda a uma cor e uma opacidade.

Outras ferramentas

Cor

Conversor de cores CSS

Cole uma cor em qualquer sintaxe e veja a mesma cor em hex, rgb(), hsl(), oklch(), lab() e display-p3, com o aviso de gamut.

 Cor

Escala de cores OKLCH

Gere os tons de 50 a 950 a partir de uma cor, com luminosidade uniforme em OKLCH, o contraste de cada tom e as custom properties prontas.

 Cor

Gerador de gradientes CSS

Monte gradientes lineares, radiais e cônicos e compare a interpolação em sRGB, OKLab e OKLCH, sem o cinza no meio.