Utilore

CSS-Schatten-Generator

Bewegen Sie die Regler, und das Muster ändert sich mit. Stapeln Sie Ebenen, wenn ein Schatten nicht reicht — so entsteht die weiche, glaubwürdige Tiefe gut gemachter Oberflächen.

Ebenen

Vorlagen

So geht es

  1. Wählen Sie, was Sie beschatten: einen Block oder Text.
  2. Versatz, Weichzeichnen und Farbe einstellen — das Muster zeichnet sich sofort neu.
  3. Ebene hinzufügen, wenn Tiefe fehlt: zwei bis drei zarte Schatten wirken besser als ein schwerer.
  4. Die CSS-Zeile unter den Reglern kopieren.

Gut zu wissen

Warum der Textschatten weniger Regler hat

Die Eigenschaft text-shadow nimmt nur Versatz, Weichzeichnen und Farbe. Ausbreitung und Innenmodus gehören allein zu box-shadow, und ein einziger zusätzlicher Wert macht die ganze Deklaration ungültig: Der Browser verwirft sie stillschweigend, und der Schatten verschwindet einfach. Im Textmodus werden diese beiden Regler deshalb ausgeblendet, statt darauf zu hoffen, dass sie überlesen werden.

Mehrere zarte Ebenen schlagen eine schwere

Ein echter Schatten ist nicht gleichmäßig: Direkt unter dem Objekt ist er dicht und löst sich mit der Entfernung auf. Ein einzelner Schatten mit starkem Weichzeichnen ergibt einen grauen Hof, während zwei oder drei Ebenen mit verschiedenen Versätzen und geringer Deckkraft die Tiefe geben, die man in gut gemachten Oberflächen sieht. Das Werkzeug hält jede Ebene getrennt, und die kopierte Zeile führt sie der Reihe nach auf.

Häufige Fragen

Wozu dient die Ausbreitung?

Sie vergrößert oder verkleinert den Schatten, bevor der Weichzeichner greift. Ein negativer Wert zieht ihn zusammen, damit er seitlich nicht hervorsteht — der Kniff hinter den sauberen Schatten auf Karten, wo der Schein unter dem Block bleiben soll und nicht ringsum.

Wie mache ich einen Innenschatten?

Setzen Sie den Haken bei «Innenschatten»: Das Schlüsselwort inset erscheint am Zeilenanfang, und der Schatten wandert in den Block hinein. Verwendet wird das für gedrückte Schaltflächen und Eingabefelder, wo die Tiefe als Vertiefung wirken soll und nicht als Erhebung.

Warum ist mein Schatten unsichtbar?

Meist steht die Deckkraft auf null, oder Versatz und Weichzeichnen sind beide null, sodass sich der Schatten genau hinter dem Block versteckt. Er verschwindet auch, wenn das Elternelement overflow: hidden hat und der Schatten außerhalb des sichtbaren Bereichs liegt.

Funktioniert das in jedem Browser?

Ja. box-shadow und text-shadow sind seit Jahren Standard und brauchen keine Präfixe; die hier erzeugten Werte sind gewöhnliches CSS ohne Herstellererweiterungen.

Ähnliche Tools