Softonic

Gerador de Cartão CSS

Etapa 1 / 2

Título do Cartão

Esta é uma prévia do seu cartão.

Próximo

Um cartão é o contêiner por trás dos blocos de produto, das pré-visualizações de blog, dos perfis e dos widgets de painel. Este gerador estiliza esse contêiner: escolha as cores de fundo e de borda, o raio dos cantos, o espaçamento interno e uma sombra suave, e veja o resultado na página. A pré-visualização mostra conteúdo de exemplo; substitua pelo seu próprio título, texto e ações. O resultado é uma classe CSS pronta para uso.

Como estilizar um contêiner de cartão

  1. 1

    Escolha as cores

    Selecione a cor de fundo e a cor da borda do cartão.

  2. 2

    Defina a forma

    Escolha o raio dos cantos e o espaçamento interno que combinem com o seu layout.

  3. 3

    Adicione a sombra

    Ajuste o desfoque e a opacidade da sombra suave sob o cartão.

  4. 4

    Veja e copie

    Confira a pré-visualização ao vivo e copie o CSS .card gerado para a sua folha de estilos.

O que o CSS gerado contém

A ferramenta gera uma única classe chamada .card:

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
  • background é a cor escolhida
  • border é sempre de 1 px sólido na cor escolhida
  • border-radius e padding são os valores escolhidos em px
  • box-shadow usa um deslocamento fixo de 4 px para baixo com seus valores de desfoque e opacidade

A pré-visualização é um exemplo

A pré-visualização mostra um título e um parágrafo para você avaliar as proporções. A ferramenta não gera HTML: aplique a classe ao seu próprio contêiner e adicione dentro dele o título, o texto, a imagem ou os botões de ação. Se o cartão for ficar sobre um fundo de página colorido, verifique o contraste da borda lá, não só na pré-visualização.

Limites sensatos

Valores negativos são limitados a zero e a opacidade da sombra fica entre 0 e 1. Valores muito grandes de espaçamento ou desfoque podem gerar resultados inesperados, então mantenha os controles nas faixas que você usaria em um layout real.

Combinar com seu próprio código

Um exemplo mínimo para a sua página:

<div class="card">
  <h3>Nome do produto</h3>
  <p>Descrição breve</p>
</div>

O estilo do contêiner não limita o que vai dentro: ele só cuida do fundo, da borda, do espaçamento e da sombra.

Perguntas frequentes

Não. Ele gera apenas a classe CSS .card. Construa o código você mesmo, por exemplo um div ou article envolvendo seu título, texto e ações.

A borda gerada é sempre de 1 px sólido. Edite a linha border no CSS se precisar de outra espessura ou estilo.

Um deslocamento vertical fixo de 4 px mantém a sombra sutil e legível. Você controla a suavidade (desfoque) e a intensidade (opacidade).

Não. O texto da pré-visualização é apenas ilustrativo. O CSS copiado não contém conteúdo, só os estilos do contêiner.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de Cores Análogas

Crie uma paleta análoga de cinco cores a partir de qualquer cor base, com o trio clássico, dois tons externos e valores hex, RGB e HSL.

Gerador de Papel de Parede em Gradiente

Gere papéis de parede em gradiente borrados de três cores para laptop, telefone ou fundos do Zoom. Randomize ou defina o ângulo e o desfoque manualmente.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Ferramenta disponível em outros idiomas