Creatore Carte Glass

Carte glassmorphism con sfocatura, gradienti e anteprima.

Proprietà della card

Sfocatura sfondo: 10px

Opacità sfondo: 7%

Opacità bordo: 30%

Raggio del bordo: 20px

Larghezza bordo: 1px

Opacità bagliore interno: 5%

Tinta sfondo

Tinta bordo

Contenuto degli elementi della card

Card di vetro

Un componente interattivo premium con rifrazione sottile ed evidenziazioni del bordo.

.glass-card {
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 40px 20px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
  padding: 24px;
  color: #ffffff;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}

Come funziona

Regola sfocatura, luci, bagliori interni e sfondo per una card in glassmorphism.
Osserva l'anteprima in tempo reale aggiornarsi mentre modifichi.
Adatta l'effetto al tuo design.
Copia HTML pulito, CSS o una configurazione Tailwind.

A cosa serve

Costruire una card in vetro smerigliato per un'interfaccia moderna.
Ottenere CSS pronto per la produzione per un effetto glassmorphism.
Esportare un componente in vetro pronto per Tailwind.

Da sapere

L'aspetto in vetro si basa su backdrop-filter e su uno sfondo movimentato dietro di esso: su un colore piatto l'effetto è sottile.
Il supporto di backdrop-filter varia; testalo nei tuoi browser di destinazione e fornisci un fallback.

Domande frequenti

Quale output posso copiare?

HTML pulito, CSS semplice o una configurazione Tailwind, a seconda di ciò che si adatta al tuo stack.

Perché il vetro appare piatto nella mia pagina?

Il glassmorphism ha bisogno di contenuto visivo dietro da sfocare. Su uno sfondo pieno non c'è nulla da smerigliare, quindi posizionalo sopra un'immagine o una sfumatura.

Viene caricato qualcosa?

No. Il builder funziona interamente nel tuo browser.

Strumenti correlati

Visualizzatore DXF

Tavolozza Colori

Convertitore Colori

Generatore Box Shadow CSS

Verifica Contrasto