Generatore CSS
Sfumature, ombre e angoli, regolati a vista
Opzioni
Risultato
background: linear-gradient(135deg, #1fa89c 0%, #7c3aed 100%);
Incolla la dichiarazione copiata direttamente nel tuo selettore CSS.
La sintassi di ombre e sfumature ha quattro o cinque numeri il cui effetto nessuno riesce a immaginare leggendo il codice. Trascina i cursori finché l’anteprima non ti convince, poi prendi la regola.
Come si usa
- 1 Scegli che cosa vuoi costruire.
- 2 Regola i cursori e i colori guardando l’anteprima.
- 3 Copia il CSS generato.
- 4 Incollalo dentro il tuo selettore.
Domande frequenti
Che cosa significano i valori di box-shadow?
Scostamento orizzontale, scostamento verticale, sfocatura, estensione, colore. La sfocatura ammorbidisce il bordo; l’estensione ingrandisce o riduce tutta l’ombra prima della sfocatura. Uno scostamento verticale positivo con poca sfocatura si legge come una luce che viene dall’alto.
Come faccio a rendere naturale un’ombra?
Tieni lo scostamento orizzontale vicino a zero, usa un piccolo scostamento verticale positivo e una sfocatura due o tre volte quello scostamento. Usa un nero a bassa opacità invece del grigio: le ombre grigie sembrano piatte sopra gli sfondi colorati.
Che cosa fa inset?
Disegna l’ombra dentro l’elemento invece che fuori, così sembra incassato invece che in rilievo. Utile per i campi di inserimento e per i pulsanti attivi.