--- title: "Schatten in Ihrer GoodBarber-App einstellen" description: "Schatten in GoodBarber: ein Klick aktiviert ihn, 3 px Versatz, 6 px Weichzeichnung, Schwarz mit 20 %. Danach stellen Sie ihn pixelgenau ein, Farbe inklusive." canonical_url: "https://de.goodbarber.com/blog/wie-stelle-ich-den-schatten-in-meiner-app-ein-a1464/" lang: de date: 2026-10-08 last_updated: 2026-10-08 --- # Wie stelle ich den Schatten in meiner App ein? In einer GoodBarber-App fällt ein gut eingestellter Schatten nicht auf: Er hebt den Inhalt vom Hintergrund ab und gibt dem Bildschirm Tiefe. Er ist sofort einsatzbereit: Ein Klick aktiviert ihn, unsere Einstellungen kalibrieren ihn. Und wenn Sie ihn nach Ihrem Geschmack wollen, lässt sich jeder Wert einstellen. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://de.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer 8. Okt. 2026 · 6 Min. Lesezeit ![](https://cmsphoto.ww-cdn.com/superstatic/129568/art/grande/98307615-68531789.jpg?v=1791460910.3530343) So stellen Sie den Schatten in einer GoodBarber-App ein, vom Klick, der ihn aktiviert, bis zur pixelgenauen Feineinstellung. ## Ein Schatten mit einem Klick ![](https://cmsphoto.ww-cdn.com/superstatic/129568/art/grande/98307615-68531790.jpg?v=1791460912.9410493) Im Design-Panel einer Liste, eines Widgets oder einer Kategorienleiste genügt ein Klick, sobald das Layout es erlaubt: **„Schatteneffekt aktivieren“**. Der Weg: **Meine App › Struktur › Ihre Rubrik › Bearbeiten Sie den Entwurf › STIL OPTIONEN**. Die Standardeinstellungen von GoodBarber erledigen den Rest (3 px Versatz, 6 px Weichzeichnung, ein Schwarz mit 20 %). Dezent hebt der Schatten jedes Element vom Hintergrund ab, ohne den Blick auf sich zu ziehen. Die TabBar und der Floating Button tragen ihren Schatten von Anfang an, einen höheren (6 px Versatz, 12 px Weichzeichnung), weil sie vor dem Inhalt liegen. Ein Schatten braucht eine Fläche, die er anheben kann, etwa den Hintergrund einer Zelle, ein Vorschaubild oder einen Button. Auf einen Text oder ein Icon legt er sich nie, damit deren Lesbarkeit nicht leidet. Sie aktivieren den Schatten; das System weiß, wo er liegen darf, und auf welcher Stufe. Diese Standardeinstellung macht Ihnen das Leben leichter und hält Ihre Schatten in der ganzen App stimmig. Das ist unser Prinzip „No design burden“: Design soll nie eine Last sein. ## Was einen Schatten ausmacht [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) Legen Sie ein Blatt Papier auf Ihren Schreibtisch: Sein Schatten klebt darunter, scharf. Heben Sie es ein paar Zentimeter an, und der Schatten rutscht nach unten und wird weicher. Auf dem Bildschirm ist es dieselbe Geschichte, mit drei Einstellungen: - **Der Versatz**: Der Schatten rückt vom Element weg, auf die dem Licht abgewandte Seite. Standardmäßig fällt er 3 px unter eine Liste, 6 unter die TabBar. Je weiter er wegrückt, desto höher wirkt das Element. - **Die Weichzeichnung**: Sie macht den Rand des Schattens weich. Standardmäßig 6 px unter einer Liste, 12 unter der TabBar. Je größer sie wird, desto mehr verschmilzt der Schatten mit dem Hintergrund. - **Die Farbe, und ihre Stärke**: Der Schatten bekommt einen Farbton und eine Deckkraft. Standardmäßig ein Schwarz mit 20 %. Ein Ton aus Ihrer Palette verleiht ihm Ihren Charakter. Diese Werte stellen Sie für jede Liste, jedes Widget oder jede Kategorienleiste ein. Die TabBar, der Floating Button und die Formularfelder dagegen werden einmal für die ganze App eingestellt. **Und für Felder: der innere Schatten** Ein Schatten hat auch eine Position. Außen, der Standard, hebt er das Element an; innen vertieft er es. Den inneren Schatten behalten wir den Formularfeldern vor, denn eine Vertiefung lädt zum Schreiben ein. Die Werte bleiben gleich, nur die Position ändert sich (external oder internal). ![](https://cmsphoto.ww-cdn.com/superstatic/129568/art/grande/98307615-68531792.jpg?v=1791460915.0170612) ## Passen Sie Ihren Schatten in GoodBarber an [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) Um die Schattenwerte selbst einzustellen, öffnet die Erweiterung **Advanced edition** das JSON, die vollständige Liste der Einstellungen. Dort stellen Sie den Schatten pixelgenau ein. Danach liegt es an Ihnen, von einer Liste zur nächsten denselben Schatten beizubehalten. Die Erweiterung ist kostenlos und wird über das Menü **„Erweiterungs-Store“** installiert, auf der Seite „Advanced edition“. Ihre Design-Bildschirme erhalten dann oben rechts den Button { EDITION }. 1. Aktivieren Sie im Design-Panel Ihrer Rubrik oder Ihres Widgets den Schatten mit dem Button **„Schatteneffekt aktivieren“**. Er erzeugt das Objekt shadow. 2. Öffnen Sie das JSON mit dem Button { EDITION } und klappen Sie das Objekt shadow auf. Die Schlüssel sind alphabetisch sortiert. 3. Beginnen Sie mit der Farbe. Klicken Sie unter shadow auf „+ Hinzufügen“. Tippen Sie in das Feld newKey color, lassen Sie „Wert“ ausgewählt, geben Sie den Hexadezimalcode ein (hier #7A542E), dann „Hinzufügen“. Speichern, und der Schatten nimmt den Farbton an und behält Versatz und Weichzeichnung. 4. Wechseln Sie zur freien Einstellung: Fügen Sie auf dieselbe Weise type hinzu, mit dem Wert custom. Ohne ihn werden die folgenden Einstellungen ignoriert. 5. Fügen Sie blur hinzu, die Weichzeichnung in Pixeln (hier 16), und opacity, die Stärke der Farbe, von 0 bis 1 (hier 0.3). Dann offset, den Versatz, als „Objekt“: Fügen Sie ihm auf dieselbe Weise x und y hinzu (hier 0 und 8, der Schatten fällt 8 px nach unten). 6. Speichern, Ihr Schatten sitzt. Eine Falle, die man kennen sollte: Die Deckkraft wird mit Punkt geschrieben, 0.3 und nicht 0,3. Mit Komma fällt der Wert auf die Standardeinstellung zurück. ## Vorher, nachher: Der Schatten nimmt Ihre Farbe an ![](https://cmsphoto.ww-cdn.com/superstatic/129568/art/grande/98307615-68531794.jpg?v=1791460917.049073) Im echten Leben ist ein Schatten nie ganz schwarz. Er nimmt die Farbe des Lichts und der Fläche an, die er berührt. Unser Standardschatten ist aus gutem Grund schwarz: Er passt zu jeder Palette, und genau das macht ihn vom ersten Klick an sicher. **Ein getönter Schatten geht einen Schritt weiter.** Auf einem cremefarbenen Hintergrund bleibt ein brauner Schatten im Ton des Hintergrunds. Hier derselbe Bildschirm zweimal. Nur ein Wert hat sich geändert, die Farbe des Schattens, vom Standardschwarz zum Braun der Palette (der Schlüssel color aus Schritt 3). Gleicher Versatz, gleiche Weichzeichnung, gleiche Stärke. Links heben sich die Zellen vom Hintergrund ab. Rechts scheinen sie auf der Seite zu liegen, und die ganze Seite passt zur Palette. Für einen einzigen Schlüssel wirkt die App wie aus einem Guss. Um eine Einstellung zu beurteilen, machen Sie es wie hier. Ändern Sie einen Wert nach dem anderen, speichern Sie, und beurteilen Sie in der Vorschau, mit der ganzen Seite vor Augen. Einen gelungenen Schatten spürt man mehr, als man ihn sieht. ## Der Schatten, vom dezentesten bis zum kräftigsten ![](https://cmsphoto.ww-cdn.com/superstatic/129568/art/grande/98307615-68531795.jpg?v=1791460919.085085) Dieselbe Zelle in derselben App kann sehr unterschiedliche Schatten tragen. Mit 5 % ist der Schatten kaum zu sehen: Er hebt die Zelle ab und sonst nichts. Ohne Weichzeichnung zeichnet er sich scharf hinter der Zelle ab, und die App gewinnt Charakter. Das Bild zeigt vier davon, vom dezentesten bis zum kräftigsten, alle mit type custom außer dem Standard: | Schatten | offset | blur | opacity (0 bis 1) | color | | -------------------- | -------- | ---- | ----------------- | ------- | | 1. Kaum sichtbar | x 0, y 4 | 16 | 0.05 | #000000 | | 2. Standard (level2) | x 0, y 3 | 6 | 0.2 | #000000 | | 3. Hart | x 6, y 6 | 0 | 1 | #282727 | | 4. Farbig | x 0, y 8 | 32 | 0.35 | #B9FF00 | Die Standardzeile erinnert nur an ihre Werte: Um sie zu bekommen, müssen Sie nichts eingeben. Die drei anderen übertragen Sie unverändert in den Editor, Schlüssel für Schlüssel. Keiner dieser Schatten ist besser als ein anderer. Jeder verleiht der App einen Charakter, und alle werden mit denselben Schlüsseln eingestellt. Der harte Schatten allein verändert den Charakter einer App, wie bei unserem [Mockup einer Kunstgalerie-App](https://dribbble.com/shots/27619835) im Neobrutalismus auf Dribbble, mit Versatz auf beiden Achsen, Weichzeichnung null und einer vollen Farbe. ## Meine Lieblingseinstellung, ein Schatten in der Farbe des Buttons ![](https://cmsphoto.ww-cdn.com/superstatic/129568/art/grande/98307615-68531796.jpg?v=1791460921.0890963) Unter einem farbigen Button ein Schatten in derselben Farbe. Das ist meine Lieblingseinstellung: 10 px Versatz, 24 Weichzeichnung, eine Stärke von 38 %. Er lastet nicht auf dem Button, er lässt ihn leuchten, wie ein Schein, und das Auge versteht, dass dies die Aktion ist, die zählt. Ich behalte ihn einer einzigen Aktion pro Bildschirm vor. Wenn alles leuchtet, sticht nichts mehr hervor. Der Floating Button wird einmal für die ganze App eingestellt, unter **App-Stil**, mit demselben Button { EDITION }, unter floatingButton, dann button, dann shadow, mit denselben Schlüsseln. **Der Schatten auf einen Blick** - Ein Klick zum Aktivieren, „Schatteneffekt aktivieren“, im Design-Panel einer Liste. - Drei Einstellungen, der Versatz, die Weichzeichnung, die Farbe und ihre Stärke. - Standardmäßig 3 px Versatz, 6 px Weichzeichnung, Schwarz mit 20 %; 6 und 12 px unter der TabBar und dem Floating Button. - Eine kostenlose Erweiterung für die Feineinstellung, Advanced edition, Button { EDITION }. - Ein Schlüssel, um den Schatten zu tönen, ohne den Rest anzurühren, color. - Zwei Positionen, außen (Relief) oder innen (Vertiefung, den Formularfeldern vorbehalten). - Eine Falle, die Deckkraft wird mit Punkt geschrieben, 0.2 und nicht 0,2. ## Jetzt sind Sie dran Der nächste Schritt ist einfach. Öffnen Sie das Design-Panel einer Ihrer Listen und aktivieren Sie den Schatteneffekt. Wenn Sie Lust auf einen Schatten in Ihren Farben bekommen, ist der Button { EDITION } an derselben Stelle, und ein einziger Schlüssel genügt für den Anfang. Die Seite des [Shadow-Atoms](https://de.goodbarber.com/uxdesign/atom-shadow/) im GoodBarber Design System liefert die vollständige Referenz, Stufen und Schlüssel. Noch keine App? [Erstellen Sie Ihre](https://de.goodbarber.com/create/) mit GoodBarber, dem Mobile App Builder. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Über den Autor Marie-Pierre Jeffard UI Designer Ich bin UI Designerin bei GoodBarber. Design System der Apps, Komponenten, Layouts, Website, Illustrationen, Animationen: Alles, was ich mache, dreht sich um das Interface. Was mir an unserem Produkt gefällt: universelle Regeln zu erfinden, die auf jedem Screen funktionieren und jeder visuellen Identität Raum geben. Die App wird zur Bühne für Ihre Inhalte. Ich mag, was einfach aussieht, und die ganze unsichtbare Arbeit, die es dafür braucht: die Regeln, die Entscheidungen und die Einschränkungen, die ein Interface zusammenhalten. Genau darüber schreibe ich hier. [Mehr von Marie-Pierre](https://de.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)