--- title: "Como regular a sombra na sua app GoodBarber" description: "No GoodBarber, a sombra de uma lista ativa-se num gesto: 3 px de deslocamento, 6 px de desfoque, preto a 20 %. Depois regula-se ao píxel, cor incluída." canonical_url: "https://pt.goodbarber.com/blog/como-regular-a-sombra-na-minha-app-a1363/" lang: pt date: 2026-10-08 last_updated: 2026-10-08 --- # Como regular a sombra na minha app? Numa app GoodBarber, uma sombra bem regulada passa despercebida: destaca o conteúdo do fundo e dá relevo ao ecrã. Vem pronta a usar: um gesto ativa-a, as nossas definições calibram-na. E se a quiser ao seu gosto, cada valor pode ser regulado. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://pt.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer 8 de out. de 2026 · 7 min de leitura ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98307614-68531779.jpg?v=1791460896.640955) Eis como se regula a sombra numa app GoodBarber, do gesto que a ativa à regulação fina, ao píxel. ## Uma sombra num gesto ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98307614-68531780.jpg?v=1791460899.2889702) No painel de design de uma lista, de um widget ou de uma barra de categorias, sempre que o layout o permita, pôr uma sombra é coisa de um gesto: **«Ativar efeito sombra»**. O caminho: **Minha App › Estrutura › a sua secção › Editar o design › OPÇÕES DE ESTILO**. As definições por defeito do GoodBarber fazem o resto (3 px de deslocamento, 6 px de desfoque, um preto a 20 %). Discreta, a sombra destaca cada elemento do fundo sem chamar a atenção. A TabBar e o botão flutuante trazem a sua sombra desde o início, mais alta (6 px de deslocamento, 12 px de desfoque), porque passam à frente do conteúdo. Uma sombra precisa de uma superfície para levantar, como o fundo de uma célula, uma miniatura ou um botão. Nunca se põe sobre um texto nem sobre um ícone, para não lhes perturbar a leitura. Você ativa a sombra; o sistema sabe onde ela pode pousar, e a que nível. Esta definição por defeito simplifica-lhe a vida e mantém as suas sombras coerentes em toda a app. É o nosso princípio «No design burden», para que o design nunca seja um fardo. ## O que faz uma sombra [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) Pouse uma folha na sua secretária: a sombra fica colada por baixo, nítida. Levante-a alguns centímetros e a sombra desliza para baixo e suaviza-se. No ecrã é a mesma história, em três definições: - **O deslocamento**: a sombra afasta-se do elemento, do lado oposto à luz. Por defeito, desce 3 px sob uma lista, 6 sob a TabBar. Quanto mais se afasta, mais alto parece o elemento. - **O desfoque**: suaviza o bordo da sombra. Por defeito, 6 px sob uma lista, 12 sob a TabBar. Quanto mais cresce, mais a sombra se funde com o fundo. - **A cor, e a sua força**: a sombra ganha um tom e uma opacidade. Por defeito, um preto a 20 %. Um tom da sua paleta dá-lhe o seu caráter. Estes valores regulam-se para cada lista, widget ou barra de categorias. A TabBar, o botão flutuante e os campos de formulário, esses, regulam-se uma só vez para toda a app. **E para os campos, a sombra interior** A sombra também tem uma posição. Exterior por defeito, levanta o elemento; interior, escava-o. Reservamos a sombra interior aos campos de formulário, porque uma cavidade convida a escrever. Os valores mantêm-se, só a posição muda (external ou internal). ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98307614-68531782.jpg?v=1791460900.97298) ## Personalize a sua sombra no 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) Para regular você mesmo os valores da sombra, a extensão **Edição avançada** abre o JSON, a lista completa das definições. Aí a sombra regula-se ao píxel. Cabe-lhe depois manter a mesma sombra de uma lista para outra. Gratuita, a extensão instala-se a partir do menu **«Loja de Extensões»**, na ficha «Edição avançada». Os seus ecrãs de design ganham então o botão { EDIÇÃO }, no canto superior direito. 1. No painel de design da sua secção ou do seu widget, ative a sombra com o botão **«Ativar efeito sombra»**. É ele que cria o objeto shadow. 2. Abra o JSON com o botão { EDIÇÃO } e abra o objeto shadow. As chaves estão por ordem alfabética. 3. Comece pela cor. Sob shadow, clique em «+ Adicionar». No campo newKey, escreva color, deixe «Valor» selecionado, introduza o código hexadecimal (#7A542E aqui), depois «Adicionar». Guarde, e a sombra ganha o tom mantendo o deslocamento e o desfoque. 4. Passe à regulação livre: adicione da mesma forma type, com o valor custom. Sem ele, as definições seguintes são ignoradas. 5. Adicione blur, o desfoque em píxeis (16 aqui), e opacity, a força da cor, de 0 a 1 (0.3 aqui). Depois offset, o deslocamento, como «Objeto»: adicione-lhe x e y da mesma forma (0 e 8 aqui, a sombra desce 8 px). 6. Guarde, a sua sombra está no lugar. Uma armadilha a conhecer: a opacidade escreve-se com ponto, 0.3 e não 0,3. Com vírgula, o valor volta à definição por defeito. ## Antes, depois: a sombra ganha a sua cor ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98307614-68531784.jpg?v=1791460903.2769933) Na vida real, uma sombra nunca é completamente preta. Ganha a cor da luz e da superfície que toca. A nossa sombra por defeito é preta por uma boa razão: combina com todas as paletas, e é isso que a torna segura desde o primeiro gesto. **Uma sombra com tom vai um passo mais longe.** Sobre um fundo creme, uma sombra castanha fica no tom do fundo. Eis o mesmo ecrã duas vezes. Só um valor mudou, a cor da sombra, do preto por defeito ao castanho da paleta (a chave color do passo 3). Mesmo deslocamento, mesmo desfoque, mesma força. À esquerda, as células destacam-se do fundo. À direita, parecem pousadas na página, e a página inteira combina com a paleta. Por uma só chave, a app parece desenhada de uma só peça. Para julgar uma regulação, faça como aqui. Mude um valor de cada vez, guarde, e julgue na pré-visualização, com a página inteira à vista. Uma sombra bem conseguida sente-se mais do que se vê. ## A sombra, da mais discreta à mais marcada ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98307614-68531785.jpg?v=1791460905.2290046) A mesma célula, na mesma app, pode ter sombras muito diferentes. A 5 %, a sombra quase não se vê: destaca a célula e nada mais. Sem desfoque, recorta-se nítida atrás da célula, e a app ganha caráter. A imagem mostra quatro, da mais discreta à mais marcada, todas em type custom salvo a por defeito: | Sombra | offset | blur | opacity (de 0 a 1) | color | | ----------------------- | -------- | ---- | ------------------ | ------- | | 1. Quase invisível | x 0, y 4 | 16 | 0.05 | #000000 | | 2. Por defeito (level2) | x 0, y 3 | 6 | 0.2 | #000000 | | 3. Dura | x 6, y 6 | 0 | 1 | #282727 | | 4. Colorida | x 0, y 8 | 32 | 0.35 | #B9FF00 | A linha por defeito só recorda os seus valores: não tem nada a escrever para a obter. As outras três passam tal e qual para o editor, chave a chave. Nenhuma destas sombras é melhor do que outra. Cada uma dá um caráter à app, e todas se regulam com as mesmas chaves. A sombra dura, por si só, muda o caráter de uma app, como na nossa [maquete de app de galeria de arte](https://dribbble.com/shots/27619835), em neobrutalismo, no Dribbble, com um deslocamento nos dois eixos, desfoque zero e uma cor plena. ## A minha regulação preferida, uma sombra da cor do botão ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98307614-68531786.jpg?v=1791460907.3370168) Sob um botão colorido, uma sombra da mesma cor. É a minha regulação preferida: 10 px de deslocamento, 24 de desfoque, uma força de 38 %. Não pesa sobre o botão, fá-lo irradiar, como um halo, e o olhar percebe que é essa a ação que conta. Reservo-a a uma única ação por ecrã. Se tudo irradia, já nada sobressai. O botão flutuante regula-se uma só vez para toda a app, em **Estilo da App**, com o mesmo botão { EDIÇÃO }, sob floatingButton, depois button, depois shadow, com as mesmas chaves. **A sombra em resumo** - Um gesto para a ativar, «Ativar efeito sombra», no painel de design de uma lista. - Três definições, o deslocamento, o desfoque, a cor e a sua força. - Por defeito, 3 px de deslocamento, 6 px de desfoque, preto a 20 %; 6 e 12 px sob a TabBar e o botão flutuante. - Uma extensão gratuita para a regulação fina, Edição avançada, botão { EDIÇÃO }. - Uma chave para dar tom à sombra sem tocar no resto, color. - Duas posições, exterior (relevo) ou interior (cavidade, reservada aos campos de formulário). - Uma armadilha, a opacidade escreve-se com ponto, 0.2 e não 0,2. ## É a sua vez O passo seguinte é simples. Abra o painel de design de uma das suas listas e ative o efeito sombra. Quando lhe apetecer uma sombra nas suas cores, o botão { EDIÇÃO } está no mesmo sítio, e uma só chave basta para começar. A página do [átomo Shadow](https://pt.goodbarber.com/uxdesign/atom-shadow/) do Design System da GoodBarber dá a referência completa, níveis e chaves. Ainda não tem app? [Crie a sua](https://pt.goodbarber.com/create/) com o GoodBarber, o Mobile App Builder. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Sobre o autor Marie-Pierre Jeffard UI Designer Sou UI Designer da GoodBarber. Design system das apps, componentes, layouts, site, ilustrações, animações: tudo o que faço gira em torno da interface. O que me agrada no nosso produto é inventar regras universais, que funcionam em todos os ecrãs e acolhem todas as identidades visuais. A app torna-se uma montra para o seu conteúdo. Gosto do que parece simples, e de todo o trabalho invisível necessário para lá chegar: as regras, as escolhas e as restrições que mantêm uma interface de pé. É isso que conto aqui. [Mais de Marie-Pierre](https://pt.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)