Gradiente Mesh CSS
Crie belos fundos de gradiente mesh com 4 pontos de cor e desfoque ajustável. Copie o CSS puro e use em qualquer projeto.
① Escolha 4 cores para cada canto ② Ajuste a intensidade do desfoque ③ Copie o CSS gerado
Cor canto superior-esquerdo
#C9B89A
Cor canto superior-direito
#7A5C38
Cor canto inferior-esquerdo
#1A3A5C
Cor canto inferior-direito
#2A5A3A
Intensidade do desfoque (px): 160px
Como funciona
O gradiente mesh usa quatro camadas radial-gradient, cada uma ancorada num canto. Os gradientes misturam-se através da transparência CSS, e a intensidade do desfoque controla o quanto cada gradiente se expande.
Intensidade do desfoque
Valores de desfoque mais altos fazem os gradientes expandirem-se mais e misturarem-se mais suavemente. Valores mais baixos mantêm cada cor mais concentrada no seu canto.
Saída CSS
O CSS gerado usa background-color como base e empilha múltiplas definições radial-gradient em background-image. Não é necessário JavaScript ou canvas.
background-color: #c9b89a;
background-image:
radial-gradient(ellipse at 0% 0%, #c9b89a 0%, transparent 160px),
radial-gradient(ellipse at 100% 0%, #7a5c38 0%, transparent 160px),
radial-gradient(ellipse at 0% 100%, #1a3a5c 0%, transparent 160px),
radial-gradient(ellipse at 100% 100%, #2a5a3a 0%, transparent 160px);
O que é um gradiente mesh?
Um gradiente mesh é uma mistura de cores multi-ponto fluida que produz fundos líquidos, semelhantes a auroras. Ao contrário de um gradiente linear ou radial padrão, um gradiente mesh coloca múltiplos pontos de cor na superfície. A implementação CSS usa camadas radial-gradient sobrepostas ancoradas em cada canto — uma técnica leve sem imagens.
Perguntas frequentes
Um gradiente mesh é um tipo de gradiente que mistura múltiplas cores colocadas em diferentes pontos de uma superfície. O resultado é um campo de cor fluido e orgânico que lembra auroras ou efeitos de luz suave.
O gradiente mesh CSS usa quatro camadas radial-gradient — uma ancorada em cada canto — que se expandem para fora e desvanecem na transparência. Estas camadas são empilhadas em background-image.
Um gradiente linear transiciona cores ao longo de um único eixo. Um gradiente mesh coloca pontos de cor em posições arbitrárias, produzindo uma mistura de cores multi-direcional fluida.
O desfoque controla o raio de expansão de cada camada radial-gradient. Um valor mais alto faz cada cor expandir-se mais antes de desvanecer para transparente, criando misturas mais longas e suaves.
Os gradientes mesh só-CSS estão limitados a pontos de ancoragem nos cantos. Os verdadeiros gradientes mesh (como no Figma ou Illustrator) podem ter pontos de cor em qualquer lugar.
Copie o CSS e aplique-o a qualquer elemento HTML, como uma secção hero, body ou cartão. O background-color garante cobertura completa como fallback.
A função radial-gradient é suportada em todos os browsers modernos (Chrome, Firefox, Safari, Edge) desde 2013.