Badge Generator
Crie emblemas, etiquetas e tags CSS com pré-visualização ao vivo. Escolha estilo, cor, tamanho e forma — copie HTML + CSS.
① Digite o texto e escolha um estilo ② Escolha cor, tamanho e forma ③ Copie o CSS e o HTML
#C9B89A
New
/* CSS */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
padding: 4px 10px;
border-radius: 9999px;
background: #c9b89a;
color: #ffffff;
border: none;
font-weight: 600;
line-height: 1;
white-space: nowrap;
}
/* HTML */
<span class="badge">New</span>O que são emblemas CSS e como projetá-los?
Os emblemas CSS são pequenos componentes de UI em linha usados para rotular, categorizar ou destacar conteúdo. Os três estilos principais são: preenchido (fundo sólido com texto branco), contorno (fundo transparente com borda e texto coloridos) e suave (fundo de baixa opacidade com texto completo). A forma é controlada por border-radius: pill usa 9999px, arredondado 6px, quadrado 2px.
Perguntas frequentes
Um emblema CSS é um pequeno elemento de UI em linha usado para rotular ou destacar conteúdo. Consiste num elemento <span> estilizado com fundo, border-radius, padding e font-size.
Preenchido: fundo sólido com texto branco. Contorno: fundo transparente com borda e texto coloridos. Suave: fundo de baixa opacidade (≈13%) com texto completo — ideal para interfaces claras.
Pílula (9999px) é o mais comum para tags e contadores. Arredondado (6px) adapta-se a etiquetas de status em cartões. Quadrado (2px) encaixa em tabelas e tags técnicas.
Adicione um emoji diretamente como prefixo de texto antes da etiqueta. Os emojis adicionam significado semântico sem bibliotecas de ícones.
Defina a classe CSS gerada uma vez e aplique-a a todos os elementos <span class='badge'> necessários.
Sim. Animações comuns incluem um pulse (escala + opacidade) para contadores de notificações.
Os emblemas suaves funcionam bem em ambos os modos com variáveis CSS. Os preenchidos mantêm o contraste. Os de contorno podem precisar de ajustes de border-color no modo escuro.