Gradientes CSS lineares e radiais: exemplos e código prontos
Nada acelera o desenvolvimento front-end como ter exemplos de código prontos para usar. Neste artigo, reunimos os padrões de gradiente CSS mais usados em design web moderno — de hero sections com gradiente diagonal a botões com efeito brilhante, passando por fundos de glassmorphism e efeitos neon. Cada exemplo vem com o código CSS completo, gerado e testado com o Gerador de Gradiente CSS da WikiPlus, pronto para copiar, adaptar às suas cores de marca e implementar imediatamente.
Gradientes para hero sections e banners principais
Hero sections com gradiente são uma das tendências mais duradouras no design web. O clássico gradiente diagonal usa ângulo de 135deg: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%). Para um efeito mais vibrante com três cores: background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #4facfe 100%). Para hero com sobreposição de gradiente sobre foto: background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%). O gradiente de fundo roxo-azul é especialmente popular em landing pages de tecnologia e SaaS. Para marcas com identidade de cores definida, substitua os valores HEX pelos códigos da sua paleta usando o Seletor de Cor da WikiPlus para obter os valores exatos.
Gradientes para cartões e componentes de interface
Cartões com gradiente sutil adicionam profundidade sem sobrecarregar a interface. Para um card elegante com gradiente suave: background: linear-gradient(145deg, #f0f0f0, #ffffff); box-shadow: 5px 5px 15px #d1d1d1, -5px -5px 15px #ffffff — o clássico efeito neumorphism. Para cartões coloridos em dashboards: background: linear-gradient(135deg, #667eea, #764ba2) para estatísticas, background: linear-gradient(135deg, #f093fb, #f5576c) para alertas. Para botões com efeito gradiente moderno: background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%); border-radius: 25px; no estado :hover, use filter: brightness(1.1) para o efeito de iluminação sem precisar redefinir o gradiente. Esses padrões são geráveis diretamente no Gerador de Gradiente CSS da WikiPlus.
Efeito aurora e gradientes mesh em CSS
O efeito aurora — um dos mais populares de 2026 — simula as auroras boreais com cores suaves e orgânicas. Em CSS puro, é possível aproximar-se do efeito usando múltiplos radial-gradients sobrepostos: background: radial-gradient(ellipse at 20% 50%, rgba(120,119,198,0.3) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(78,205,196,0.3) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(255,107,107,0.3) 0%, transparent 50%), #0f0f1a. Este padrão cria um fundo escuro com manchas de cor suaves que se misturam. Para a versão animada, adicione @keyframes alternando as posições com background-position. O Gerador de Gradiente CSS da WikiPlus gera o código base que você pode expandir com essas técnicas.
Gradientes com texto: efeito degradê em tipografia
Um dos efeitos visuais mais impactantes em design moderno é texto com gradiente de cor. A técnica em CSS combina background-clip: text e transparent no color: .texto-gradiente { background: linear-gradient(90deg, #667eea, #764ba2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }. O gradiente pode ser qualquer linear-gradient, radial-gradient ou mesmo conic-gradient. Para títulos de landing page, gradientes vibrantes (azul para rosa, amarelo para laranja) criam alto impacto visual. Para interfaces corporativas, gradientes sutis da cor primária para uma variação mais clara adicionam sofisticação sem exagero. Use o Gerador de Gradiente CSS da WikiPlus para criar e visualizar o gradiente ideal, depois aplique a técnica de background-clip para o efeito tipográfico.
Perguntas frequentes
- Como criar um gradiente CSS de 45 graus perfeito?
- Use linear-gradient(45deg, cor1, cor2). O ângulo 45deg cria uma diagonal do canto inferior esquerdo para o superior direito. Para a diagonal oposta, use 135deg. Para garantir que o gradiente fique igual em diferentes proporções de tela, use porcentagens nos color stops em vez de valores absolutos.
- Gradiente CSS afeta o desempenho do site?
- Gradientes CSS simples têm impacto mínimo de desempenho — são compostos pelo GPU e não requerem requisições de rede. Gradientes muito complexos com muitos color stops em elementos que animam podem causar repaint frequente. Para elementos animados, prefira usar transform e opacity em vez de mudar propriedades de background diretamente.
- Como gerar um código de gradiente CSS para usar no Figma?
- O Figma usa sua própria interface de gradiente, então o código CSS não é importável diretamente. Porém, você pode usar o Gerador de Gradiente CSS da WikiPlus para visualizar e definir o gradiente, anotar os valores HEX das cores e ângulos, e depois recriar manualmente no Figma com os mesmos parâmetros.