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

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Gerador de README

Gere um README.md estruturado a partir de alguns campos: nome do projeto, tagline, recursos, comando de instalação, trecho de início rápido, autor e licença. Cole direto no seu repositório.

Visualizador de Markdown

Escreva Markdown e veja a renderização HTML atualizar ao vivo. Sintaxe com estilo GitHub, incluindo tabelas, listas de tarefas, blocos de código cercados e autolinks.

Gerador de Configuração Nginx

Gere blocos de servidor Nginx com TLS, HTTP/2, gzip, cache de navegador e regras de proxy reverso a partir de um formulário simples.

Ferramenta disponível em outros idiomas