Degradê Branco

9 degradês de branco prontos, com o código CSS para copiar: do Branco ao Tubarão Branco, branco com preto e com cinza e branco com as cores que combinam com ele. Passe o mouse no card para ver os códigos de cada cor.

#FFFFFF

#B0B0AF

Branco para Tubarão Branco

Do tom mais claro ao mais escuro de branco.

#FFFFFF

#F8F8F0

#EDE6E2

#B0B0AF

Branco Tom Sobre Tom

Quatro tons de branco: Branco, Off White, Lua Crescente, Tubarão Branco.

#FFFFFF

#000000

Branco para Preto

Escurece até o preto.

#FFFFFF

#808080

Branco para Cinza

Do branco ao cinza médio, sem chegar ao preto.

#F4F0EC

#EFDFBB

Isabelino para Branco Holandês

Isabelino e Branco Holandês quase não mudam de claridade: o degradê troca só o matiz.

#FFFFFF

#000080

Branco para Azul-Marinho

Branco com uma das cores que combinam com ele.

#FFFFFF

#008000

Branco para Verde

Branco com uma das cores que combinam com ele.

#FFFFFF

#FF0000

Branco para Vermelho

Branco com uma das cores que combinam com ele.

#FFFFFF

#CEC5B6

Branco Radial

Do centro para as bordas, o tom claro no meio.

Códigos CSS dos Degradês de Branco

Toque na linha para copiar o CSS do degradê branco.

Degradê	CSS
Branco para Tubarão Branco	`linear-gradient(90deg, #FFFFFF 0%, #B0B0AF 100%)`
Branco Tom Sobre Tom	`linear-gradient(180deg, #FFFFFF 0%, #F8F8F0 33%, #EDE6E2 67%, #B0B0AF 100%)`
Branco para Preto	`linear-gradient(180deg, #FFFFFF 0%, #000000 100%)`
Branco para Cinza	`linear-gradient(180deg, #FFFFFF 0%, #808080 100%)`
Isabelino para Branco Holandês	`linear-gradient(135deg, #F4F0EC 0%, #EFDFBB 100%)`
Branco para Azul-Marinho	`linear-gradient(90deg, #FFFFFF 0%, #000080 100%)`
Branco para Verde	`linear-gradient(90deg, #FFFFFF 0%, #008000 100%)`
Branco para Vermelho	`linear-gradient(90deg, #FFFFFF 0%, #FF0000 100%)`
Branco Radial	`radial-gradient(circle at center, #FFFFFF 0%, #CEC5B6 100%)`

Como Usar o Degradê Branco

Os degradês desta página usam 24 tons de branco com nome, do Branco (#FFFFFF) ao Tubarão Branco (#B0B0AF).

No degradê Branco para Tubarão Branco, o texto branco não chega a 4,5:1 (o mínimo para leitura, pela WCAG) em nenhum ponto; o máximo é 2,2:1, na ponta escura. Use texto preto, que tem 21,0:1 na ponta clara, ou ponha o texto numa faixa sólida.

Nenhum dos pares fica acinzentado no meio: as pontas de cada degradê estão perto na roda de cores ou uma delas é neutra (branco, preto ou cinza). Com cores opostas, como branco e a complementar, ponha uma terceira cor no centro.

Para outros tons, veja os tons de branco e as paletas com branco, com nome e código, ou monte o seu degradê no Criador de Gradiente, que já abre com três tons de branco. O guia Degradê de cores: como criar um gradiente bonito explica os tipos linear, radial e cônico.