Biblioteca de Fundos com Gradiente
Navegue por mais de 110 fundos com gradiente CSS selecionados e organizados por estilo: pôr do sol, oceano, floresta, fogo, roxo, pastel, escuro, neon, minimalista, quente e frio. Clique em qualquer gradiente para copiar na hora o valor CSS de fundo pronto para uso. Grátis, sem cadastro.
Showing 110 of 110 gradients
Golden Hour
linear-gradient(135deg, #f6d365 0%, #fda08…
Sunset Blaze
linear-gradient(135deg, #f83600 0%, #f9d42…
Dusk
linear-gradient(135deg, #fc4a1a 0%, #f7b73…
Amber Glow
linear-gradient(135deg, #f7971e 0%, #ffd20…
Horizon
linear-gradient(135deg, #ff6e7f 0%, #bfe9f…
Twilight
linear-gradient(135deg, #ee0979 0%, #ff6a0…
Peach Fuzz
linear-gradient(135deg, #ffb347 0%, #ffcc3…
Coral Reef
linear-gradient(135deg, #ff9a9e 0%, #fad0c…
Deep Sea
linear-gradient(135deg, #0f2027 0%, #203a4…
Aqua Splash
linear-gradient(135deg, #13547a 0%, #80d0c…
Tidal Wave
linear-gradient(135deg, #1a6dff 0%, #00d2f…
Lagoon
linear-gradient(135deg, #43c6ac 0%, #19165…
Seafoam
linear-gradient(135deg, #a8edea 0%, #fed6e…
Pacific
linear-gradient(135deg, #005c97 0%, #36379…
Maldives
linear-gradient(135deg, #00b4db 0%, #0083b…
Bali Blue
linear-gradient(135deg, #56ccf2 0%, #2f80e…
Emerald
linear-gradient(135deg, #11998e 0%, #38ef7…
Jungle
linear-gradient(135deg, #134e5e 0%, #71b28…
Moss
linear-gradient(135deg, #56ab2f 0%, #a8e06…
Rainforest
linear-gradient(135deg, #1d976c 0%, #93f9b…
Sage
linear-gradient(135deg, #b2d8b2 0%, #e8f5e…
Pine
linear-gradient(135deg, #2d6a4f 0%, #52b78…
Fern
linear-gradient(135deg, #74b49b 0%, #a7c5b…
Canopy
linear-gradient(135deg, #093028 0%, #237a5…
Inferno
linear-gradient(135deg, #f12711 0%, #f5af1…
Lava
linear-gradient(135deg, #200122 0%, #6f000…
Ember
linear-gradient(135deg, #eb5757 0%, #00000…
Phoenix
linear-gradient(135deg, #f7971e 0%, #e52d2…
Volcano
linear-gradient(135deg, #870000 0%, #190a0…
Wildfire
linear-gradient(135deg, #ff416c 0%, #ff4b2…
Torch
linear-gradient(135deg, #f46b45 0%, #eea84…
Magma
linear-gradient(135deg, #c94b4b 0%, #4b134…
Amethyst
linear-gradient(135deg, #9d50bb 0%, #6e48a…
Cosmic
linear-gradient(135deg, #20002c 0%, #cbb4d…
Lavender
linear-gradient(135deg, #e0c3fc 0%, #8ec5f…
Nebula
linear-gradient(135deg, #a18cd1 0%, #fbc2e…
Ultraviolet
linear-gradient(135deg, #4776e6 0%, #8e54e…
Plum
linear-gradient(135deg, #4b0082 0%, #9400d…
Orchid
linear-gradient(135deg, #da22ff 0%, #9733e…
Violet Haze
linear-gradient(135deg, #c471f5 0%, #fa71c…
Cotton Candy
linear-gradient(135deg, #ffecd2 0%, #fcb69…
Baby Blue
linear-gradient(135deg, #a1c4fd 0%, #c2e9f…
Blush
linear-gradient(135deg, #fbc2eb 0%, #a6c1e…
Mint Cream
linear-gradient(135deg, #d4fc79 0%, #96e6a…
Peach Sorbet
linear-gradient(135deg, #ffeaa7 0%, #fab1a…
Lilac
linear-gradient(135deg, #e0c3fc 0%, #d4a5f…
Powder Pink
linear-gradient(135deg, #ffd1dc 0%, #ffb3c…
Sky Mist
linear-gradient(135deg, #e0f7fa 0%, #b2ebf…
Midnight
linear-gradient(135deg, #0f0c29 0%, #302b6…
Obsidian
linear-gradient(135deg, #1a1a2e 0%, #16213…
Charcoal
linear-gradient(135deg, #232526 0%, #41434…
Void
linear-gradient(135deg, #000000 0%, #43434…
Abyss
linear-gradient(135deg, #000000 0%, #0f202…
Shadow
linear-gradient(135deg, #2c3e50 0%, #4ca1a…
Onyx
linear-gradient(135deg, #1a1a1a 0%, #2d2d2…
Eclipse
linear-gradient(135deg, #0d0d0d 0%, #1a053…
Neon Pulse
linear-gradient(135deg, #00f260 0%, #0575e…
Electric
linear-gradient(135deg, #00c6ff 0%, #0072f…
Cyber
linear-gradient(135deg, #f953c6 0%, #b91d7…
Acid
linear-gradient(135deg, #b3ff00 0%, #00ff8…
Plasma
linear-gradient(135deg, #ff00cc 0%, #33339…
Laser
linear-gradient(135deg, #ff0099 0%, #49324…
Glitch
linear-gradient(135deg, #00ffff 0%, #ff00f…
Synthwave
linear-gradient(135deg, #fc00ff 0%, #00dbd…
Snow
linear-gradient(135deg, #e0e0e0 0%, #fffff…
Fog
linear-gradient(135deg, #d7d2cc 0%, #30435…
Ash
linear-gradient(135deg, #b8c6db 0%, #f5f7f…
Parchment
linear-gradient(135deg, #f5f0e8 0%, #e8dcc…
Linen
linear-gradient(135deg, #f5f5f0 0%, #e8e8e…
Slate
linear-gradient(135deg, #f8f9fa 0%, #e9ece…
Mist
linear-gradient(135deg, #f0f4f8 0%, #d9e2e…
Pearl
linear-gradient(135deg, #fdfbfb 0%, #ebede…
Honey
linear-gradient(135deg, #f6d365 0%, #fda08…
Caramel
linear-gradient(135deg, #d4a574 0%, #f4e4c…
Terracotta
linear-gradient(135deg, #c0392b 0%, #e67e2…
Autumn
linear-gradient(135deg, #d35400 0%, #f39c1…
Cinnamon
linear-gradient(135deg, #8b4513 0%, #d2691…
Saffron
linear-gradient(135deg, #f7971e 0%, #ffd20…
Maple
linear-gradient(135deg, #c94b4b 0%, #e67e2…
Butterscotch
linear-gradient(135deg, #f9d423 0%, #ff4e5…
Arctic
linear-gradient(135deg, #e8f4f8 0%, #a8d8e…
Glacier
linear-gradient(135deg, #b2d8d8 0%, #66a6f…
Steel
linear-gradient(135deg, #4b6cb7 0%, #18284…
Sapphire
linear-gradient(135deg, #1e3c72 0%, #2a69a…
Frost
linear-gradient(135deg, #cfd9df 0%, #e2ebf…
Cerulean
linear-gradient(135deg, #2980b9 0%, #6dd5f…
Cobalt
linear-gradient(135deg, #0052d4 0%, #4364f…
Teal Dream
linear-gradient(135deg, #00b09b 0%, #96c93…
Aurora
linear-gradient(135deg, #00c9ff 0%, #92fe9…
Rainbow
linear-gradient(135deg, #ff0000 0%, #ff770…
Prism
linear-gradient(135deg, #f093fb 0%, #f5576…
Candy
linear-gradient(135deg, #f6d365 0%, #fda08…
Sunrise
linear-gradient(135deg, #f8b500 0%, #ff6b6…
Galaxy
linear-gradient(135deg, #0d0d0d 0%, #1a053…
Opal
linear-gradient(135deg, #a8edea 0%, #fed6e…
Holographic
linear-gradient(135deg, #f093fb 0%, #f5576…
Denim
linear-gradient(135deg, #1e3c72 0%, #2a69a…
Rosewood
linear-gradient(135deg, #ad5389 0%, #3c105…
Citrus
linear-gradient(135deg, #f7971e 0%, #ffd20…
Watermelon
linear-gradient(135deg, #ff6b6b 0%, #feca5…
Bubblegum
linear-gradient(135deg, #ff9a9e 0%, #fecfe…
Moonrise
linear-gradient(135deg, #3a1c71 0%, #d76d7…
Tropics
linear-gradient(135deg, #1fa2ff 0%, #12d8f…
Velvet
linear-gradient(135deg, #4a0072 0%, #7b1fa…
Champagne
linear-gradient(135deg, #f7e7ce 0%, #d4a96…
Midnight Blue
linear-gradient(135deg, #2c3e50 0%, #3498d…
Tangerine
linear-gradient(135deg, #f7971e 0%, #ff6b6…
Spearmint
linear-gradient(135deg, #1d976c 0%, #93f9b…
Dusty Rose
linear-gradient(135deg, #d4a5a5 0%, #f7d6d…
Indigo Night
linear-gradient(135deg, #1a1a2e 0%, #16213…
Por que usar a nossa biblioteca de fundos com gradiente?
- Cópia instantânea com um clique: clique em « Copiar CSS » em qualquer cartão de gradiente e a propriedade CSS background pronta para uso é copiada para a área de transferência: cole diretamente na sua folha de estilos, configuração do Tailwind ou ferramenta de design.
- Filtro e busca por estilo: navegue por mais de 110 gradientes por categoria (pôr do sol, oceano, floresta, fogo, roxo, pastel, escuro, neon, minimalista, quente e frio) ou busque por nome, cor ou palavra-chave de estilo para encontrar na hora o fundo com gradiente perfeito.
- Saída CSS pronta para produção: cada fundo com gradiente da biblioteca é um valor CSS válido usando a sintaxe padrão linear-gradient(). Copie e cole diretamente em qualquer arquivo CSS, CSS-in-JS, Tailwind ou estilo em linha, sem modificar nada.
- 100 % grátis, sem cadastro: a biblioteca de fundos com gradiente é totalmente gratuita, sem conta, sem cadastro e sem limites de uso. Todos os gradientes são livres para uso pessoal e comercial. Navegue, copie e publique: sem condições.
Casos de uso comuns da biblioteca de fundos com gradiente
- Fundos de hero e landing page: aplique um fundo com gradiente à sua seção hero, banner de CTA ou layout de página inteira em segundos. A biblioteca entrega CSS pronto para produção que você cola direto na sua folha de estilos, sem ferramentas extras.
- Cards de interface e divisores de seção: use fundos com gradiente para separar visualmente seções, destacar cards de recursos ou dar profundidade a tabelas de preços. Navegue pela biblioteca por estilo: minimalista para divisores sutis, neon para destaques marcantes.
- Mockups no Figma e ferramentas de design: copie o valor CSS de qualquer fundo com gradiente e cole diretamente no Figma, Sketch ou Adobe XD como preenchimento. A biblioteca evita recriar gradientes à mão na sua ferramenta de design toda vez.
- Gráficos para redes sociais e marketing: crie fundos marcantes para posts em redes sociais, miniaturas do YouTube e cabeçalhos de e-mail com os gradientes da biblioteca. As categorias pôr do sol, neon e oceano são especialmente populares em visuais de marketing.
- Telas de abertura de apps móveis e PWA: use fundos com gradiente da biblioteca para telas de splash, slides de onboarding e estados de carregamento. As categorias escuro e minimalista funcionam especialmente bem em padrões de UI móvel modernos.
- Apresentações e slides: aplique fundos com gradiente a slides no Google Slides, PowerPoint ou Keynote. A biblioteca cobre todos os climas, dos gradientes minimalistas profissionais aos estilos neon e pôr do sol vibrantes.
O que é um fundo com gradiente CSS?
Um fundo com gradiente CSS é uma transição suave entre duas ou mais cores renderizada inteiramente pelo navegador, sem arquivo de imagem. A biblioteca de fundos com gradiente usa a função padrão linear-gradient() do CSS, compatível com todos os navegadores modernos. Como os gradientes são gerados pelo CSS, eles são infinitamente escaláveis, carregam na hora e não adicionam nenhum byte ao seu peso de imagens, o que os torna ideais para um design web atento ao desempenho.
Como usar a biblioteca de fundos com gradiente
- Navegue ou busque: use os botões de filtro por categoria (pôr do sol, oceano, neon etc.) ou a barra de busca para encontrar um fundo com gradiente que combine com seu design.
- Copie o CSS: clique no botão « Copiar CSS » em qualquer cartão de gradiente. A declaração completa background: linear-gradient(…); é copiada na hora para a área de transferência.
- Cole e publique: cole o CSS do fundo com gradiente diretamente na sua folha de estilos, na prop style do Tailwind, em CSS-in-JS ou na sua ferramenta de design. Nenhuma modificação necessária: funciona de imediato.
Como é a saída CSS
- Direção: todos os gradientes usam 135deg (diagonal do canto superior esquerdo ao inferior direito) por padrão, um ângulo muito agradável. Você pode mudar o ângulo no seu próprio CSS após copiar.
- Paradas de cor: a maioria dos gradientes usa 2 a 3 paradas definidas como valores HEX. Gradientes com várias paradas (como Rainbow e Holographic) usam até 7 para transições mais ricas.
- Sintaxe: a saída usa linear-gradient() padrão, compatível com todos os navegadores modernos e pré-processadores CSS (Sass, Less, PostCSS).
- Personalização: após copiar, você pode ajustar o ângulo, adicionar mais paradas de cor ou combinar com background-size e background-position para efeitos de gradiente animados.
Categorias da biblioteca de fundos com gradiente explicadas
A biblioteca de fundos com gradiente está organizada em 11 categorias de estilo para você encontrar o clima certo rapidamente. Os gradientes pôr do sol e quentes usam laranjas, amarelos e rosas: ideais para designs energéticos e acolhedores. Os gradientes oceano e frios usam azuis e turquesas: ótimos para interfaces profissionais e de tecnologia. Os gradientes escuros funcionam bem em interfaces de modo escuro e heroes dramáticos. Os gradientes neon têm alto contraste e vibração: perfeitos para games, entretenimento e marketing ousado. Os gradientes minimalistas são sutis e neutros: ideais para fundos que não devem competir com o conteúdo.
Perguntas frequentes
Uma biblioteca de fundos com gradiente é uma coleção selecionada de fundos com gradiente CSS que você pode navegar e copiar com um clique. Esta biblioteca contém mais de 110 valores linear-gradient() escolhidos a dedo e organizados por estilo (pôr do sol, oceano, floresta, fogo, roxo, pastel, escuro, neon, minimalista, quente e frio), todos prontos para colar diretamente no seu CSS.
Clique no botão « Copiar CSS » em qualquer cartão de gradiente. A declaração CSS completa do fundo é copiada para a área de transferência. Cole na sua folha de estilos, na prop style do Tailwind, em CSS-in-JS ou na sua ferramenta de design. Nenhuma modificação é necessária.
Sim. Todos os gradientes da biblioteca usam a sintaxe padrão linear-gradient() do CSS com valores de cor. Você pode usar qualquer gradiente desta biblioteca livremente em projetos pessoais e comerciais, sem atribuição.
Claro. Todos os gradientes usam 135deg (diagonal) por padrão. Para mudar a direção, substitua 135deg por qualquer ângulo: 0deg de cima para baixo, 90deg da esquerda para a direita ou qualquer outro. O restante do CSS do gradiente continua igual.
CSS linear-gradient() não pode ser animado diretamente. A técnica mais comum é usar background-size: 200% 200% e animar background-position com uma regra @keyframes do CSS. O CSS do gradiente desta biblioteca serve como ponto de partida para qualquer técnica de animação.
Sim. Use o CSS copiado como prop style em linha, ou adicione-o ao seu tailwind.config.js em theme.extend.backgroundImage. O Tailwind v3+ também aceita valores arbitrários: bg-[linear-gradient(135deg,_#f6d365,_#fda085)].
Totalmente. A biblioteca de fundos com gradiente é uma ferramenta de referência estática: não há entrada de dados, upload de arquivos nem processamento de dados. Tudo roda localmente no seu navegador. Nenhum dado é enviado a servidor algum.
Copie qualquer gradiente da biblioteca e aplique ao seu elemento: .meu-elemento { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }. Para um fundo de página inteira, aplique ao elemento body ou html.
Sim. O CSS aceita várias camadas de fundo separadas por vírgulas. Use cores rgba() com transparência no primeiro gradiente para misturá-lo sobre o segundo: background: linear-gradient(135deg, rgba(246,211,101,0.8), rgba(253,160,133,0.8)), linear-gradient(45deg, #667eea, #764ba2);