Card Generator
Projete componentes de cartão CSS com pré-visualização ao vivo. Ajuste padding, sombra, borda e efeitos hover — copie HTML + CSS.
① Ajuste padding e border radius ② Escolha sombra e efeito hover ③ Copie o CSS e o HTML
#FFFFFF
Card Title
Card body text goes here. Describe your content in a few sentences.
/* CSS */
.card {
padding: 24px;
border-radius: 12px;
background: #ffffff;
border: none;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
/* HTML */
<div class="card">
<h3 style="margin:0 0 8px">Card Title</h3>
<p style="margin:0 0 16px;opacity:.7;font-size:14px">Card body text goes here. Describe your content in a few sentences.</p>
<button style="padding:8px 16px;border-radius:6px;border:none;cursor:pointer">Action</button>
</div>O que faz um bom componente de cartão CSS?
Um cartão CSS é um dos padrões de UI mais versáteis. Agrupa conteúdo relacionado numa unidade visualmente contida com border-radius e box-shadow. Níveis de sombra: sm (elevação sutil), md (cartão padrão), lg (painel flutuante) e xl (modal). Efeitos hover: lift com transform: translateY(-4px) e glow com contorno de cor.
Perguntas frequentes
Um cartão CSS é um bloco de UI autónomo que agrupa conteúdo relacionado, com cor de fundo, border-radius, padding e box-shadow.
box-shadow recebe offset horizontal, offset vertical, raio de desfoque, raio de expansão e cor. Para cartões, use 0 para offset horizontal e valores de desfoque baixos.
Lift move o cartão para cima com transform: translateY(-4px) ao passar o rato e aumenta o box-shadow para simular o cartão flutuando.
Use sombra para cartões em fundos brancos ou claros. Use bordas em fundos escuros ou texturizados.
Os cartões usam tipicamente width: 100% com max-width. Em grelhas: CSS Grid com grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)).
Cartões pequenos: 8–12px. Cartões padrão: 12–16px. Painéis grandes: 16–24px.
Use propriedades CSS personalizadas para cores de fundo e sombra. No modo escuro, reduza a opacidade da sombra.