Softonic

Generatore di schede CSS

Passaggio 1 / 2

Titolo della scheda

Questa è un'anteprima della tua scheda.

Avanti

Una scheda è il contenitore dietro i riquadri dei prodotti, le anteprime dei blog, i profili e i widget della dashboard. Questo generatore definisce lo stile di quel contenitore: scegli colore di sfondo e del bordo, raggio degli angoli, spaziatura interna e un’ombra morbida, poi guarda il risultato nella pagina. L’anteprima mostra un contenuto segnaposto; sostituiscilo con il tuo titolo, il tuo testo e le tue azioni. Il risultato è una classe CSS pronta all’uso.

Come definire lo stile del contenitore di una scheda

  1. 1

    Scegli i colori

    Seleziona il colore di sfondo e il colore del bordo della scheda.

  2. 2

    Imposta la forma

    Scegli raggio degli angoli e spaziatura interna adatti al tuo layout.

  3. 3

    Aggiungi l’ombra

    Regola sfocatura e opacità dell’ombra morbida sotto la scheda.

  4. 4

    Anteprima e copia

    Controlla l’anteprima live e copia il CSS .card generato nel tuo foglio di stile.

Cosa contiene il CSS generato

Lo strumento produce un’unica classe chiamata .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 è il colore scelto
  • border è sempre di 1 px pieno nel colore scelto
  • border-radius e padding sono i valori scelti in px
  • box-shadow usa un offset fisso di 4 px verso il basso con i valori di sfocatura e opacità scelti

L’anteprima è un segnaposto

L’anteprima mostra un titolo e un paragrafo per valutare le proporzioni. Lo strumento non produce HTML: applica la classe al tuo contenitore e aggiungi dentro titolo, testo, immagine o pulsanti di azione. Se la scheda finirà su uno sfondo di pagina colorato, verifica lì il contrasto del bordo, non solo nell’anteprima.

Limiti sensati

I valori negativi vengono portati a zero e l’opacità dell’ombra resta tra 0 e 1. Valori molto grandi di spaziatura o sfocatura possono dare risultati inattesi: tieni i controlli nei range che useresti in un layout reale.

Combinare con il proprio markup

Un esempio minimo per la tua pagina:

<div class="card">
  <h3>Nome del prodotto</h3>
  <p>Descrizione breve</p>
</div>

Lo stile del contenitore non limita il contenuto: gestisce solo sfondo, bordo, spaziatura e ombra.

Domande frequenti

No. Produce solo la classe CSS .card. Costruisci tu il markup, ad esempio un div o un article che contiene titolo, testo e azioni.

Il bordo generato è sempre di 1 px pieno. Modifica la riga border nel CSS se ti serve uno spessore o uno stile diverso.

Un offset verticale fisso di 4 px mantiene l’ombra discreta e leggibile. Controlli tu la sua morbidezza (sfocatura) e la sua intensità (opacità).

No. Il testo dell’anteprima serve solo alla visualizzazione. Il CSS copiato non contiene contenuti, solo gli stili del contenitore.

Strumenti correlati

Riferimento Tabella ASCII

Tabella ASCII completa da 0 a 127 con decimale, esadecimale, ottale, binario e riferimento numerico HTML per ogni carattere, inclusi i codici di controllo come NUL, LF e DEL.

Generatore di lettere casuali

Genera lettere A-Z casuali. Scegli la quantità, usa maiuscole, minuscole o un mix, e applica il risultato a giochi, spunti o attività in classe.

Riferimento ai caratteri HTML

Elenco ricercabile delle entità HTML, dei loro codici nominati e numerici, e copia con un clic per caratteri e simboli speciali.

Riferimento scorciatoie da tastiera

Cerca le scorciatoie predefinite documentate di VS Code, Chrome e Bash con GNU Readline su macOS, Windows e Linux.

Trova nome colore

Trova il colore CSS standard con nome più vicino a un valore HEX, RGB o HSL usando la differenza CIEDE2000.

Generatore di Palette di Colori

Genera palette monocromatiche, analoghe, complementari, triadiche o tetradiche da un colore base HEX ed esporta variabili CSS pronte da copiare.