Pular para o conteúdo principal
iotools.cloudiotools.cloud

Gerador de Fundo CSS Aurora / Blob Gradiente

Crie um fundo CSS 'aurora' suave e impressionante com 2-5 blobs de gradiente radial coloridos, com desfoque ajustável, posições e tamanhos, além de animação @keyframes de deriva opcional. Copie o CSS ou visualize ao vivo.

Entrada

Fundo

Cor sólida mostrada atrás dos blobs.

Suavidade dos blobs — valores mais altos misturam-nos mais.

Blobs

Blob 1

Blob 2

Blob 3

Animação

Saída

Seu fundo aurora será exibido aqui.

CSS

Adicione isto à sua folha de estilos e aplique class="aurora-bg" a um container.

Trecho HTML (visualização estática)

Div com estilo inline correspondente à visualização acima — cole em qualquer lugar. Não inclui a animação de deriva.

Isso foi útil?

Mais formas de usar esta ferramenta

API REST

curl -X POST https://api.iotools.cloud/v1/tool/css-aurora-blob-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "baseColor": "#0f0f1e",
    "blur": "60",
    "blobCount": "2",
    "blob1Color": "#ff4d8a",
    "blob1X": "20",
    "blob1Y": "30",
    "blob1Size": "60",
    "blob2Color": "#5a3dff",
    "blob2X": "75",
    "blob2Y": "25",
    "blob2Size": "55",
    "animate": "",
    "animationDuration": "20"
  }'

Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.

Peça a um agente de IA

Use the IOTools `css-aurora-blob-generator` tool (Aurora / Gradient Blob CSS Background Generator) on this input:

YOUR_INPUT_HERE

Cole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.

Widget para incorporar

<iframe
  src="https://iotools.cloud/embed/css-aurora-blob-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="Gerador de Fundo CSS Aurora / Blob Gradiente — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

Coloque isso na sua própria página — grátis, sem chave, só um link de volta.

Custo por chamada de API/MCPA partir de 5 créditos
Precisa de mais créditos?Ver preços

Também disponível via

IntegraçõesExtensão de navegadorExtensão para VS Code

Guias

O que é um fundo "aurora"?

Um fundo aurora (também chamado de "gradient blob" ou "blob gradient" background) é o brilho suave, luminoso e desfocado popularizado por inúmeras páginas de marketing SaaS e seções hero — um punhado de formas grandes e coloridas borradas derrapando lentamente atrás do conteúdo. Ao contrário de um linear-gradient simples, parece profundidade e luz em vez de um desbotamento plano único.

Esta ferramenta constrói o efeito com CSS puro: 2 a 5 camadas radial-gradient() coloridas ("blobs"), cada uma posicionada e dimensionada independentemente, empilhadas como camadas background-image separadas por vírgula atrás do seu conteúdo e suavizadas com um filter: blur() único. Ative a animação opcional e os blobs derrapam lentamente através de uma regra @keyframes gerada — sem JavaScript, canvas ou imagens necessárias em tempo de execução.

Como usar esta ferramenta

  1. Escolha uma Cor Base — a cor sólida mostrada atrás dos blobs — e uma quantidade de Desfoque. Valores de desfoque mais altos fundem os blobs em um brilho mais suave; valores mais baixos mantêm cada blob mais distinto.
  2. Escolha o Número de Blobs (2-5). Cada blob obtém sua própria Cor, Posição X/Y % (onde seu centro fica dentro do container) e Tamanho % (o quão longe se estende antes de desaparecer para transparente).
  3. Opcionalmente ative Animar para adicionar uma animação @keyframes de deriva lenta — cada blob desliza para uma posição próxima e volta, em uma duração que você controla, para que o fundo nunca pareça estático.
  4. Copie o CSS e aplique class="aurora-bg" a um container posicionado (ou renomeie a classe para corresponder ao seu próprio stylesheet) — os blobs são renderizados em um pseudo-elemento ::before atrás do seu conteúdo, para que o texto e outros filhos permaneçam perfeitamente nítidos mesmo com um desfoque pesado.
  5. A Visualização mostra exatamente o que o CSS produz; o Trecho HTML abaixo é a mesma marcação que um <div> com estilo inline independente que você pode colar em qualquer lugar em que uma folha de estilos não seja conveniente. Observe que o trecho sempre mostra o frame em repouso (não animado) — um atributo style inline não pode incluir uma regra @keyframes, portanto a deriva apenas aparece depois que o bloco CSS (com seu @keyframes aurora-drift) está realmente em uma folha de estilos.

Por que desfoque em vez de mais paradas de gradiente?

Um filter: blur() único aplicado a todo o fundo em camadas é o que dá a uma aurora suas bordas características macias e brilhantes — é barato para computar, funciona de forma idêntica em todos os blobs independentemente da posição ou tamanho, e é a mesma técnica por trás do look "frosted glow" em sites como Stripe ou páginas de marketing do Linear. Colocar camadas nele em um pseudo-elemento ::before (em vez de desfocar o container em si) mantém o desfoque de sangrar no seu conteúdo real.

FAQ

Isso funcionará em todos os navegadores? Sim. Fundos radial-gradient() em camadas, animações filter: blur() e CSS @keyframes foram suportados em todos os navegadores principais há anos — nenhum prefixo de fornecedor necessário.

Por que a visualização ao vivo parece estática mesmo com Animar ativado? A visualização renderiza a mesma marcação com estilo inline que o Trecho HTML abaixo, e um atributo style inline não tem como referenciar uma regra @keyframes. A animação é real e incluída no bloco CSS gerado — você a verá se mover depois de colar o CSS em uma folha de estilos real.

Posso usar mais de 5 blobs? Não com esta ferramenta — 5 mantém o CSS gerado curto e fácil de editar manualmente e ainda oferece um look rico e em camadas. Você sempre pode duplicar uma camada radial-gradient() no resultado se quiser mais.

Por que não há controle de opacidade por blob? Cada blob já desaparece de cor total para completamente transparente por design (isso é o que "Tamanho %" controla), e o Desfoque global suaviza ainda mais cada blob igualmente — um controle deslizante de opacidade extra não alteraria significativamente o resultado visível, então é deixado de fora para manter os controles focados.

Privacidade

Tudo acontece no seu navegador. Suas cores, posições e configurações escolhidas nunca são enviadas para um servidor — CSS, HTML e visualização são gerados e atualizados localmente conforme você ajusta os controles.

cssgradientaurorablobbackgroundgeneratoranimationweb designmesh gradient

Ama as ferramentas? Livre-se dos anúncios.

Um único pagamento remove todos os anúncios da sua conta, para sempre. Sem assinatura, sem rastreamento.

Remover anúncios