Badge Generator
Crea badge, etichette e tag CSS con anteprima live. Scegli stile, colore, dimensione e forma — copia HTML + CSS pronti.
① Scrivi il testo e scegli uno stile ② Scegli colore, dimensione e forma ③ Copia CSS e 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>Cosa sono i badge CSS e come progettarli?
I badge CSS sono piccoli componenti UI inline usati per etichettare, categorizzare o evidenziare contenuti. I tre stili principali sono: filled (sfondo solido con testo bianco), outlined (sfondo trasparente con bordo e testo colorati) e soft (sfondo a bassa opacità con testo a piena opacità). La forma è controllata da border-radius: pill usa 9999px, rounded usa 6px, square usa 2px. Aggiungere un prefisso emoji è un pattern comune nei design system moderni.
Domande frequenti
Un badge CSS è un piccolo elemento UI inline usato per etichettare o evidenziare contenuti. Tipicamente è un elemento <span> stilizzato con sfondo, border-radius, padding e font-size.
Filled: sfondo solido con testo bianco — alto contrasto. Outlined: sfondo trasparente con bordo e testo colorati — minimale. Soft: sfondo a bassa opacità (≈13%) con testo a piena opacità — ideale per UI light.
Pill (9999px) è il più comune per tag e contatori. Arrotondato (6px) si adatta a etichette di stato nelle card. Quadrato (2px) si adatta a tabelle e tag tecnici.
Aggiungi un'emoji direttamente come prefisso di testo prima dell'etichetta del badge. Le emoji aggiungono significato semantico senza librerie di icone.
Definisci la classe CSS generata una volta e applicala a tutti gli elementi <span class='badge'> necessari.
Sì. Le animazioni comuni includono un pulse (scala + opacità) per attirare l'attenzione sui contatori di notifica.
I badge soft funzionano bene in entrambe le modalità con variabili CSS. I filled mantengono il contrasto. Gli outlined potrebbero necessitare di adattamenti per il border-color in dark mode.