Generatore di ombre CSS
Box Shadow Generator
Compone ombre di riquadro e di testo su più livelli con anteprima dal vivo e restituisce il CSS.
Compone un’ombra a strati e la emette come `box-shadow`, `text-shadow` o filtro `drop-shadow()`. La cosa da sapere è che un solo strato non va quasi mai bene: un’ombra reale è un termine di contatto stretto e scuro più uno ambientale ampio e tenue, e una singola ombra può essere solo uno dei due. La pagina lo ricorda con insistenza e dice quali parti di uno strato la proprietà di destinazione non sa esprimere.
- Livello 1
- Livello 2
Preimpostazioni
Gli scostamenti crescono più o meno linearmente con l’elevazione e la sfocatura con la sua radice quadrata: è quello che produce davvero una luce puntiforme sopra un piano. L’opacità cala man mano che l’ombra cresce — la stessa occlusione distribuita su più area — e invertire questa relazione è ciò che fa sembrare macchie le ombre regolate a mano.
CSS
box-shadow: 0px 1px 3px rgb(0 0 0 / 0.1), 0px 4px 8px -2px rgb(0 0 0 / 0.08);Come si usa
Dire su che cosa andrà
`box-shadow` per una scheda o un pulsante, `text-shadow` per il testo, `drop-shadow()` per qualunque cosa abbia vera trasparenza: un’icona o un PNG ritagliato. L’anteprima cambia di conseguenza, così si guarda sempre la cosa giusta.
Partire da un preset
Sono pile a due strati in cui gli scostamenti crescono linearmente con l’elevazione, la sfocatura con la sua radice quadrata e l’opacità cala man mano che l’ombra si allarga. Quest’ultimo punto è quello che a mano si sbaglia al contrario, ed è proprio sbagliarlo al contrario che fa sembrare un’ombra una sbavatura.
Impostare il colore della superficie su quello reale
Un’ombra calibrata sul bianco è troppo debole su una pagina grigia e troppo forte su una scura. Il campione della superficie serve a calibrare contro lo sfondo su cui il componente starà davvero.
Regolare gli strati
Scostamento, sfocatura, `spread` e colore per ogni strato, più una casella `inset`. Quando serve l’alfa conviene digitare il colore invece di usare il campione: i colori delle ombre sono quasi sempre traslucidi e il campo di colore nativo non sa rappresentarlo.
Copiare la dichiarazione
Il nome della proprietà cambia con la destinazione, quindi quello che si copia è pronto da incollare così com’è.
Domande frequenti
Cambiando destinazione sono spariti `inset` e `spread`. Dove sono finiti?
Sono stati eliminati, e la pagina lo dice sopra l’output. La grammatica di `text-shadow` non prevede né `inset` né `spread`: prende una x, una y, una sfocatura e un colore, punto. Nemmeno `drop-shadow()` ha `inset` o `spread`. Emetterli comunque produrrebbe una dichiarazione che il browser scarta per intero, il che è peggio che perdere la parte che non può sopravvivere.
Perché il campione di colore non corrisponde a quello che ho digitato?
Il campione è un `<input type="color">`, che capisce soltanto `#rrggbb` e non ha alcun canale alfa. Mostra l’esadecimale più fedele possibile di quanto è stato digitato, e il campo di testo resta quello che fa fede. Quando il valore contiene un’alfa, va modificato il testo.
`drop-shadow()` è solo un `box-shadow` più lento?
No, risponde a una domanda diversa. `box-shadow` segue il riquadro del bordo, quindi a un PNG trasparente tocca un rettangolo. `drop-shadow()` segue il canale alfa, quindi ricalca la forma vera. Costa però una passata di composizione, e non sa fare né `inset` né `spread`: va usato quando conta la forma, e negli altri casi va bene `box-shadow`.
Quanti strati sono troppi?
Due o tre fanno tutto ciò che serve a un’interfaccia. Ogni strato è un’altra sfocatura che il compositore esegue a ogni disegno, e un’ombra a sei strati su un elenco di duecento righe ha un costo misurabile in fotogrammi al secondo su un telefono. I preset si fermano a tre proprio per questo.
Può ricevere da
Generatore di angoli arrotondati
Border Radius Generator
Modella ogni angolo per conto suo, compresa la sintassi a due valori che dà la forma a squircle, ed esporta il CSS.
Editor di curve di accelerazione
Easing Curve Editor
Regola una curva cubic-bezier o a molla guardando un’anteprima animata e restituisce la funzione di temporizzazione CSS.
Banco di prova per i filtri CSS
CSS Filter Playground
Sovrappone su un campione i filtri di sfocatura, luminosità, saturazione, tonalità e ombra portata e restituisce il CSS.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Generatore di angoli arrotondati
Border Radius Generator
Modella ogni angolo per conto suo, compresa la sintassi a due valori che dà la forma a squircle, ed esporta il CSS.
Banco di prova per i filtri CSS
CSS Filter Playground
Sovrappone su un campione i filtri di sfocatura, luminosità, saturazione, tonalità e ombra portata e restituisce il CSS.
Formattatore e minificatore CSS
CSS Beautifier & Minifier
Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.
Generatore di gradienti CSS
CSS Gradient Builder
Costruisce gradienti lineari, radiali e conici trascinando i punti di arresto ed esporta il CSS in sRGB o in OKLCH.
Convertitore di codici colore
Colour Format Converter
Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.