CSS-Schattengenerator (box-shadow, text-shadow)

Stellt box-shadow, text-shadow und filter: drop-shadow() mit Schiebereglern ein, stapelt mehrere Schattenebenen und liefert Ihnen das CSS. Nützlich, um die Tiefe einer Karte oder eines Buttons, einen eingedrückten Inset-Look oder eine Textkontur festzulegen, während Sie eine Live-Vorschau beobachten.

So geht’s

1. Wählen Sie unter „Art“ box-shadow, text-shadow oder filter: drop-shadow.
2. Stellen Sie in jeder Ebene unter „Schattenebenen“ „Versatz X“, „Versatz Y“, „Unschärfe“, „Ausdehnung“ (nur box-shadow), „Schattenfarbe“ und „Deckkraft“ ein. Schalten Sie „Innen“ ein, um einen inneren Schatten zu erhalten.
3. Drücken Sie „Ebene hinzufügen“ oder „Duplizieren“ für weitere Ebenen und ordnen Sie sie mit den Pfeilen neu. Wenn Sie das Häkchen einer Ebene entfernen, bleibt sie vorerst außen vor.
4. Stellen Sie in der Vorschau links „Hintergrund“, „Kartenfarbe“, „Eckenradius“ und „Kartengröße“ passend zu Ihrem echten Bildschirm ein.
5. Wählen Sie bei Bedarf unter „Vorlagen“ einen Ausgangspunkt und drücken Sie dann „Kopieren“ neben dem CSS.

So wird gerechnet

• Eine box-shadow-Ebene wird als „[inset] x y Unschärfe Ausdehnung Farbe“ geschrieben. Eine positive Ausdehnung vergrößert den Schatten, eine negative verkleinert ihn. text-shadow hat weder Ausdehnung noch inset.
• filter: drop-shadow() folgt der sichtbaren Form (einem PNG-Symbol, einem SVG) statt dem Kasten, und mehrere hintereinander geschriebene Funktionen stapeln sich.
• Farben werden als HEX geschrieben, wenn sie deckend sind, sonst als rgb(r g b / a). Eine natürliche Tiefe entsteht meist aus zwei oder drei Ebenen mit geringer Deckkraft und zunehmender Unschärfe.
• Die Ebenen und die Vorschau-Einstellungen werden in diesem Browser gespeichert.

Häufige Fragen

In welcher Reihenfolge stehen die Werte in box-shadow?

Versatz X, Versatz Y, Unschärfe, Ausdehnung, Farbe; für einen inneren Schatten steht inset ganz vorn. Zum Beispiel: box-shadow: 0 4px 12px rgb(0 0 0 / 0.15).

Wie gebe ich einer Karte einen natürlichen Schatten?

Stapeln Sie zwei oder drei Ebenen mit 10 bis 20 Prozent Deckkraft und erhöhen Sie schrittweise den vertikalen Versatz und die Unschärfe. Die Vorlagen „Mittlere Erhebung“ und „Weich, 5 Ebenen“ sind so aufgebaut.

Kann text-shadow eine Textkontur erzeugen?

Ja. Vier Schatten ohne Unschärfe in den vier Richtungen (1px 1px, -1px -1px, 1px -1px, -1px 1px) ergeben eine dünne Kontur. Die Vorlage „Textkontur“ macht genau das.

Was ist der Unterschied zwischen box-shadow und dem drop-shadow-Filter?

box-shadow beschattet den rechteckigen Kasten des Elements; der drop-shadow-Filter beschattet die sichtbare Form. Für Symbole oder SVG auf transparentem Hintergrund ist drop-shadow die richtige Wahl.