CSS-box-shadow-Generator

So funktioniert es

1. Die Regler für einen einzelnen Schatten benutzen, oder für mehrere je einen je Zeile eintippen.
2. Eine Zeile ist „x y Weichzeichnung Ausdehnung Farbe“ – jede weggelassene Zahl ist null.
3. Auf text-shadow umschalten, wenn Text den Schatten bekommt.
4. Die Deklaration kopieren.

Häufige Fragen

Wozu mehr als ein Schatten?

Weil ein einzelner fast nie richtig aussieht. Ein echter besteht aus einer engen dunklen Kante und einem weiten weichen Auslauf; zwei oder drei mit unterschiedlicher Weichzeichnung und Deckkraft übereinander sind es, was eine Karte abgehoben wirken lässt statt umrandet.

Was macht die Ausdehnung?

Sie vergrößert oder verkleinert den Schatten, bevor er weichgezeichnet wird. Eine negative Ausdehnung zieht ihn zusammen – so bekommt man einen Schatten, der unter einem Element sitzt, ohne seitlich hervorzuquellen.

Warum wird meine text-shadow-Ausdehnung ignoriert?

Weil text-shadow keine Ausdehnung kennt – es nimmt nur x, y, Weichzeichnung und Farbe. Die Seite sagt Ihnen, wenn Sie eine vierte Zahl getippt haben, statt sie stillschweigend fallen zu lassen, wie ein Browser es tut.

Was ist „nach innen“?

Damit wird der Schatten innen statt außen gezeichnet – so lässt man etwas eingedrückt aussehen. Das gilt nur für box-shadow.

Wird etwas an einen Server geschickt?

Nein. Es läuft im Browser, was Sie eingeben, bleibt auf Ihrem Rechner.