Box-Shadow-Generator

Was ist ein Box-Shadow- und Button-Generator?#

Ein Box-Shadow ist die CSS-Regel, die hinter einem Element einen Schlagschatten malt. Trotz des Namens kann sie viel mehr als Schatten: Richtige geschichtet erzeugt sie die weiche Erhebung, die moderne UI-Karten und Buttons physisch wirken lässt, sie kann eine eingesenkte Rille für einen „Gedrückt“-Zustand schnitzen und ein farbiges Leuchten um einen fokussierten Eingabe-Field nachahmen. Die Schwierigkeit ist, dass man einen Schatten richtig machen muss und dabei fünf Werte pro Ebene jongliert (Versatz X, Versatz Y, Unschärfe, Ausbreitung, Farbe) plus ein optionales inset-Schlüsselwort — und die meisten echten Buttons stapeln zwei oder drei Ebenen, sodass Sie am Ende zehn bis fünfzehn Zahlen von Hand einstellen.

Diese Seite nimmt Ihnen die Arithmetik ab. Sie stapeln Schatten-Ebenen und stellen Radius, Rand, Innenabstand und Farben eines Buttons in der Seitenleiste ein; die rechte Fläche zeigt einen Live-Button mit angewendetem Schatten und schreibt sowohl die .btn-CSS-Regel als auch das passende <button>-HTML aus, fertig zum Einfügen. Der Standard beim Laden ist der vertraute, zweischichtige erhöhte Button, der in modernen Design-Systemen verwendet wird — ein solider Startpunkt, den Sie dann in Ihre eigene Marke verschieben.

Verwendung#

Die Seitenleiste hält die Steuerungen; die rechte Fläche hält die Vorschau, die CSS-Ausgabe und die HTML-Ausgabe.

1. Schatten aufbauen. Unter Schatten klicken Sie auf Ebene hinzufügen, um eine neue Ebene zu stapeln. Jede Ebene hat sechs Steuerungen:
   • Versatz X / Versatz Y — wie weit der Schatten nach rechts/unten verschoben wird (negativ geht links/hoch). 0/0 zentriert ihn und erzeugt ein gleichmäßiges Leuchten.
   • Unschärfe — wie weich die Kante ist. 0 ist eine harte, flache Kopie; große Werte diffundieren sie. Unschärfe kann in CSS nicht negativ sein.
   • Ausbreitung — vergrößert oder verkleinert den Fußabdruck des Schattens. Negative Ausbreitung zieht eine breite Unschärfe zu einer straffen, überzeugenden Kante zusammen.
   • Farbe — eine Hex-Farbe. Verwenden Sie den Alpha-Kanal (eine 8-stellige Hex wie #00000033), um den Schatten durchscheinend zu machen; voll deckende Farben rendern als solides #RRGGBB.
   • Innen — schalten Sie das um, um den Schatten innerhalb des Elements zu malen (ein eingedrückter, geschnitzter Look) statt dahinter.
   • Nach oben / Nach unten / Löschen sortieren Ebenen um oder entfernen sie. Die erste Ebene in der Liste malt oben auf; die letzte sitzt ganz hinten.
2. Button gestalten. Unter Button setzen Sie die Beschriftung, dann Radius, Rand-Breite, Randfarbe, Innenabstand Y / X, Hintergrund und Textfarbe. Farbfelder paaren ein Hex-Textfeld mit einem nativen Farbwähler.
3. Kopieren, was Sie brauchen. Kopieren neben CSS übernimmt die vollständige .btn-Regel; Kopieren neben HTML übernimmt das <button>-Element. Eine Randbreite von 0 kollabiert den Rand zu border: none;.

Hauptfunktionen#

• Mehrere Ebenen, in Reihenfolge. Ein überzeugnder Schatten ist fast immer zwei oder drei Ebenen — eine stramme dunkle Kante nah am Element und eine weichere, hellere Wäsche weiter außen. Sie können so viele stapeln und umsortieren, wie Sie brauchen.
• Alpha-bewusste Farben-Serialisierung. Eine voll deckende Farbe wird als sauberes #RRGGBB ausgegeben; sobald Sie Transparenz hinzufügen, schaltet sie auf rgba(r, g, b, a) mit getrimmtem Alpha um — die Formen, die echte Stylesheets tatsächlich verwenden.
• Der ganze Button in einer Regel. Radius, Rand, Innenabstand, Hintergrund, Textfarbe und der Schatten werden alle in einen einzigen .btn-Block ausgegeben, sodass ein Einfügen das Element vollständig gestaltet.
• Passendes HTML. Die HTML-Ausgabe ist einfach <button class="btn">Beschriftung</button>, mit HTML-escapter Beschriftung — selbst eine Beschriftung voller < oder & lässt sich sicher einfügen.
• Live-Vorschau fixiert links-nach-rechts. Ein positiver X-Versatz verschiebt den Schatten stets nach rechts, daher ist die Vorschau unabhängig von der Seitensprache auf LTR gezwungen.

Ausführliches Beispiel#

Die Seite lädt mit einem fertigen erhöhten Indigo-Button. Sein Schatten ist zweischichtig: eine stramme -1px-Ausbreitungskante am Button und eine breitere, dezentere Wäsche weiter außen. Das exakt erzeugte CSS:

.btn {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.102);
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  background-color: #4F46E5;
  color: #FFFFFF;
}

Beachten Sie, dass die beiden Ebenen zusammenarbeiten: Die erste (4px 6px Unschärfe, -1px Ausbreitung, 0.2 Alpha) definiert die knackige Kontaktkante; die zweite (10px 15px Unschärfe, -3px Ausbreitung, 0.102 Alpha) liefert die ambiente Erhebung. Lassen Sie das Alpha sinken und der Schatten wird zu einem flachen schwarzen Stempel; erhöhen Sie die Ausbreitung und der Button wirkt, als schwebe er zu hoch.

Für einen Gedrückt-Zustand löschen Sie diese Ebenen und fügen eine einzige hinzu: Innen an, Versatz 0/2, Unschärfe 4, Ausbreitung 0, Farbe #00000033. Die Ausgabe wird zu inset 0 2px 4px rgba(0, 0, 0, 0.2) — das Element wirkt nun in die Oberfläche eingesenkt, perfekt für einen :active-Stil.

FAQ#

Warum kommt die Farbe als rgba(...), obwohl ich Hex eingetippt habe?#

Wenn Ihr Hex einen Alpha-Kanal hat (8 Ziffern, wie #00000033), serialisiert das Werkzeug ihn als rgba(r, g, b, a), weil das die Form ist, die die meisten CSS-Tools und älteren Browser zuverlässig parsen. Eine voll deckende Farbe — kein Alpha oder Alpha bei FF — bleibt als kompaktes #RRGGBB. Beide rendern identisch zu dem, was Sie eingestellt haben; es geht rein darum, welche Notation downströms robuster ist.

In welcher Reihenfolge werden die Ebenen gemalt?#

Die erste Ebene in der Liste wird oben gemalt, die letzte ganz unten. Für eine natürliche Erhebung setzen Sie die scharfe, dunkle, nahe Ebene zuerst und die weiche, helle, ferne zweite — auf diese Weise wird die stramme Kontaktkante nicht von der ambienten Wäsche erstickt. Sortieren Sie mit Nach oben / Nach unten um, bis die Vorschau stimmig ist.

Unschärfe oder Ausbreitung — was ist der Unterschied?#

Unschärfe weicht die Kante des Schattens auf (ein Verlauf von voller Farbe zu transparent). Ausbreitung vergrößert oder verkleinert den gesamten Schatten um einen festen Betrag, bevor die Unschärfe angewendet wird — positive Ausbreitung macht ihn größer und solider, negative Ausbreitung frisst ihn an und ist das Geheimnis einer straffen, professionellen Kante auf einer breit-unscharfen Ebene. Ein häufiger Fehler ist, nur die Unschärfe zu bemühen und eine aufgedunsene Wolke zu erhalten; -2px oder -3px Ausbreitung bringen sie wieder in Form.

Kann ich diesen Schatten auf ein div anwenden, nicht auf einen Button?#

Ja. Das CSS funktioniert auf jedem Element, das box-shadow akzeptiert — kopieren Sie nur die box-shadow:-Zeile (oder die gesamte, auf Ihren Selektor umbenannte Regel) und lassen Sie die Button-spezifischen Deklarationen weg, die Sie nicht brauchen. Die HTML-Ausgabe ist nur relevant, wenn Sie tatsächlich einen <button> wollen.