--- title: "Come regolare l'ombra nella tua app GoodBarber" description: "In GoodBarber, l'ombra di una lista si attiva con un gesto: 3 px di spostamento, 6 px di sfocatura, nero al 20 %. Poi si regola al pixel, colore compreso." canonical_url: "https://it.goodbarber.com/blog/come-regolare-l-ombra-nella-mia-app-a1124/" lang: it date: 2026-10-08 last_updated: 2026-10-08 --- # Come regolare l'ombra nella mia app? In un'app GoodBarber, un'ombra ben regolata passa inosservata: stacca il contenuto dallo sfondo e dà rilievo alla schermata. È pronta all'uso: un gesto la attiva, le nostre impostazioni la calibrano. E se la vuoi a modo tuo, ogni valore si può regolare. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://it.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer 8 ott 2026 · 6 min di lettura ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98307612-68531766.jpg?v=1791460883.180877) Ecco come si regola l'ombra in un'app GoodBarber, dal gesto che la attiva alla regolazione fine, al pixel. ## Un'ombra con un gesto ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98307612-68531767.jpg?v=1791460885.5048904) Nel pannello di design di una lista, di un widget o di una barra di categorie, quando il layout lo consente, mettere un'ombra è questione di un gesto: **«Attivare l'effetto ombra»**. Il percorso: **La mia app › Struttura › la tua sezione › Modificare il design › OPZIONI DI STILE**. Le impostazioni predefinite di GoodBarber fanno il resto (3 px di spostamento, 6 px di sfocatura, un nero al 20 %). Discreta, l'ombra stacca ogni elemento dallo sfondo senza attirare lo sguardo. La TabBar e il pulsante flottante hanno la loro ombra fin dall'inizio, più alta (6 px di spostamento, 12 px di sfocatura), perché passano davanti al contenuto. Un'ombra ha bisogno di una superficie da sollevare, come lo sfondo di una cella, una miniatura o un pulsante. Non si posa mai su un testo né su un'icona, per non disturbarne la lettura. Tu attivi l'ombra; il sistema sa dove può posarsi, e a quale livello. Questa impostazione predefinita ti semplifica la vita e mantiene le tue ombre coerenti in tutta l'app. È il nostro principio «No design burden», perché il design non sia mai un peso. ## Che cosa fa un'ombra [Une lumière se pose en quatre étapes autour d'une cellule ; l'ombre part à l'opposé, s'allonge et s'adoucit quand la lumière s'éloigne, et l'objet shadow suit en direct](https://player.vimeo.com/video/1234038832?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Appoggia un foglio sulla scrivania: la sua ombra resta incollata sotto, netta. Sollevalo di qualche centimetro e l'ombra scivola verso il basso e si ammorbidisce. Sullo schermo è la stessa storia, con tre impostazioni: - **Lo spostamento**: l'ombra si allontana dall'elemento, dalla parte opposta alla luce. Per impostazione predefinita scende di 3 px sotto una lista, di 6 sotto la TabBar. Più si allontana, più l'elemento sembra alto. - **La sfocatura**: ammorbidisce il bordo dell'ombra. Per impostazione predefinita, 6 px sotto una lista, 12 sotto la TabBar. Più cresce, più l'ombra si fonde con lo sfondo. - **Il colore, e la sua forza**: l'ombra prende una tinta e un'opacità. Per impostazione predefinita, un nero al 20 %. Una tinta della tua palette le dà il tuo carattere. Questi valori si regolano per ogni lista, widget o barra di categorie. La TabBar, il pulsante flottante e i campi dei moduli, invece, si regolano una volta sola per tutta l'app. **E per i campi, l'ombra interna** L'ombra ha anche una posizione. Esterna per impostazione predefinita, solleva l'elemento; interna, lo incava. Riserviamo l'ombra interna ai campi dei moduli, perché un incavo invita a scrivere. I valori restano gli stessi, cambia solo la posizione (external o internal). ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98307612-68531769.jpg?v=1791460887.1809) ## Personalizza la tua ombra in GoodBarber [Animation : l'éditeur Advanced edition ouvert sur l'objet shadow d'un widget de la Home ; la clé color s'ajoute, Save, l'ombre devient brune ; puis type, blur, opacity et offset, Save, l'ombre s'allonge (interface en anglais)](https://player.vimeo.com/video/1234039095?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) Per regolare da te i valori dell'ombra, l'estensione **Edizione avanzata** apre il JSON, l'elenco completo delle impostazioni. Lì l'ombra si regola al pixel. Sta poi a te mantenere la stessa ombra da una lista all'altra. Gratuita, l'estensione si installa dal menu **«Extension Store»**, alla scheda «Edizione avanzata». Le tue schermate di design guadagnano allora il pulsante { EDIZIONE }, in alto a destra. 1. Nel pannello di design della tua sezione o del tuo widget, attiva l'ombra con il pulsante **«Attivare l'effetto ombra»**. È lui a creare l'oggetto shadow. 2. Apri il JSON con il pulsante { EDIZIONE } e apri l'oggetto shadow. Le chiavi sono in ordine alfabetico. 3. Comincia dal colore. Sotto shadow, fai clic su «+ Aggiungi». Nel campo newKey, scrivi color, lascia «Valore» selezionato, inserisci il suo codice esadecimale (#7A542E qui), poi «Aggiungi». Salva, e l'ombra prende la tinta conservando spostamento e sfocatura. 4. Passa alla regolazione libera: aggiungi allo stesso modo type, con il valore custom. Senza di esso, le impostazioni seguenti vengono ignorate. 5. Aggiungi blur, la sfocatura in pixel (16 qui), e opacity, la forza del colore, da 0 a 1 (0.3 qui). Poi offset, lo spostamento, come «Oggetto»: aggiungici x e y allo stesso modo (0 e 8 qui, l'ombra scende di 8 px). 6. Salva, la tua ombra è al suo posto. Una trappola da conoscere: l'opacità si scrive con il punto, 0.3 e non 0,3. Con la virgola, il valore torna all'impostazione predefinita. ## Prima, dopo: l'ombra prende il tuo colore ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98307612-68531771.jpg?v=1791460889.2769122) Nella vita reale, un'ombra non è mai del tutto nera. Prende il colore della luce e della superficie che tocca. La nostra ombra predefinita è nera per una buona ragione: si accorda con tutte le palette, ed è questo che la rende sicura fin dal primo gesto. **Un'ombra tinta fa un passo in più.** Su uno sfondo crema, un'ombra marrone resta nel tono dello sfondo. Ecco la stessa schermata due volte. È cambiato un solo valore, il colore dell'ombra, dal nero predefinito al marrone della palette (la chiave color del passo 3). Stesso spostamento, stessa sfocatura, stessa forza. A sinistra, le celle si staccano dallo sfondo. A destra, sembrano appoggiate sulla pagina, e la pagina intera si accorda con la palette. Per una sola chiave, l'app sembra disegnata tutta d'un pezzo. Per giudicare un'impostazione, fai come qui. Cambia un valore alla volta, salva, e giudica nell'anteprima, con la pagina intera sotto gli occhi. Un'ombra riuscita si sente più di quanto si veda. ## L'ombra, dalla più discreta alla più decisa ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98307612-68531772.jpg?v=1791460891.5929258) La stessa cella, nella stessa app, può portare ombre molto diverse. Al 5 %, l'ombra quasi non si vede: stacca la cella e nient'altro. Senza sfocatura, si ritaglia netta dietro la cella, e l'app prende carattere. L'immagine ne mostra quattro, dalla più discreta alla più decisa, tutte in type custom tranne quella predefinita: | Ombra | offset | blur | opacity (da 0 a 1) | color | | ----------------------- | -------- | ---- | ------------------ | ------- | | 1. Appena visibile | x 0, y 4 | 16 | 0.05 | #000000 | | 2. Predefinita (level2) | x 0, y 3 | 6 | 0.2 | #000000 | | 3. Dura | x 6, y 6 | 0 | 1 | #282727 | | 4. Colorata | x 0, y 8 | 32 | 0.35 | #B9FF00 | La riga predefinita ricorda solo i suoi valori: non devi scrivere nulla per ottenerla. Le altre tre si riportano tali e quali nell'editor, chiave per chiave. Nessuna di queste ombre è migliore di un'altra. Ognuna dà un carattere all'app, e tutte si regolano con le stesse chiavi. L'ombra dura, da sola, cambia il carattere di un'app, come nel nostro [mockup di app per una galleria d'arte](https://dribbble.com/shots/27619835), in stile neobrutalista, su Dribbble, con uno spostamento sui due assi, sfocatura zero e un colore pieno. ## La mia impostazione preferita, un'ombra del colore del pulsante ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98307612-68531773.jpg?v=1791460893.6169374) Sotto un pulsante colorato, un'ombra dello stesso colore. È la mia impostazione preferita: 10 px di spostamento, 24 di sfocatura, una forza del 38 %. Non pesa sul pulsante, lo fa brillare, come un alone, e l'occhio capisce che è quella l'azione che conta. La riservo a una sola azione per schermata. Se tutto brilla, non spicca più niente. Il pulsante flottante si regola una volta sola per tutta l'app, in **Stile dell'app**, con lo stesso pulsante { EDIZIONE }, sotto floatingButton, poi button, poi shadow, con le stesse chiavi. **L'ombra in breve** - Un gesto per attivarla, «Attivare l'effetto ombra», nel pannello di design di una lista. - Tre impostazioni, lo spostamento, la sfocatura, il colore e la sua forza. - Per impostazione predefinita, 3 px di spostamento, 6 px di sfocatura, nero al 20 %; 6 e 12 px sotto la TabBar e il pulsante flottante. - Un'estensione gratuita per la regolazione fine, Edizione avanzata, pulsante { EDIZIONE }. - Una chiave per tingere l'ombra senza toccare il resto, color. - Due posizioni, esterna (rilievo) o interna (incavo, riservata ai campi dei moduli). - Una trappola, l'opacità si scrive con il punto, 0.2 e non 0,2. ## Tocca a te Il prossimo passo è semplice. Apri il pannello di design di una delle tue liste e attiva l'effetto ombra. Quando ti verrà voglia di un'ombra nei tuoi colori, il pulsante { EDIZIONE } è nello stesso posto, e una sola chiave basta per cominciare. La pagina dell'[atomo Shadow](https://it.goodbarber.com/uxdesign/atom-shadow/) del Design System di GoodBarber dà il riferimento completo, livelli e chiavi. Non hai ancora un'app? [Crea la tua](https://it.goodbarber.com/create/) con GoodBarber, il Mobile App Builder. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Informazioni sull'autore Marie-Pierre Jeffard UI Designer Sono UI Designer di GoodBarber. Design system delle app, componenti, layout, sito, illustrazioni, animazioni: tutto quello che faccio ruota intorno all'interfaccia. Quello che mi piace del nostro prodotto è inventare regole universali, che funzionano su tutti gli schermi e accolgono tutte le identità visive. L'app diventa uno scrigno per i tuoi contenuti. Amo ciò che sembra semplice, e tutto il lavoro invisibile che serve per arrivarci: le regole, le scelte e i vincoli che tengono in piedi un'interfaccia. È questo che racconto qui. [Altri articoli di Marie-Pierre](https://it.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)