Mit diesem kostenlosen CSS-Box-Shadow-Generator erstellen und exportieren Sie Schlagschatten für Elemente direkt im Browser, ohne selbst Code zu schreiben.
Ziehen Sie einen Schieberegler und die Vorschau wird sofort aktualisiert. Jede Immobilie liegt direkt vor Ihnen.
Was Sie steuern können:
- Horizontaler und vertikaler Offset
- Radius für Weichzeichnen und Streuen
- Schattenfarbe und Deckkraft
- Einsatz- oder Ausgangsrichtung
Stapeln Sie mehrere Schatten Ebenen für komplexe Effekte. Sie wissen nicht, wo Sie anfangen sollen? Wählen Sie eines der 8 integrierten Presets wie Soft Lift, Neon Glow oder Retro und optimieren Sie es von dort aus.
Die Vorschaubox ist ebenfalls flexibel. Wechseln Sie zwischen abgerundeten, quadratischen, kreisförmigen und Kartenformen. Ändern Sie die Rahmenfarbe und den Leinwandhintergrund, um Ihrem tatsächlichen Designkontext zu entsprechen.
Wenn Sie fertig sind, exportieren Sie in dem Format, das Sie benötigen:
- Plain CSS
- Eine CSS-Eigenschaft (
--shadow: ...) - Ein Tailwind Konfigurationseintrag
- Ein React Inline-Stilobjekt
Reduzieren Sie die Ausgabe oder halten Sie sie lesbar. Fügen Sie das Präfix -webkit- mit einem Klick hinzu. Kopieren Sie es und fügen Sie es direkt in Ihr Projekt ein.
Keine Anmeldung erforderlich. Es gibt keine Werbung. Einfach ein schnelles, sauberes Werkzeug, das Ihnen aus dem Weg geht.
Was ist ein CSS-Box-Shadow-Generator?
Ein CSS-Box-Shadow-Generator ist ein browserbasiertes Tool, das Schieberegler- und Farbeingaben in eine kopierfertige Box-Shadow-Syntax umwandelt.
Anstatt Offset- und Weichzeichnungswerte von Hand zu erraten, ziehen Sie ein paar Steuerelemente und das Werkzeug schreibt die Deklaration für Sie.
Das gesamte Tool ist um eine einzige Eigenschaft in CSS (EN) herum aufgebaut, nichts mehr.
- Es berührt keine Pixel und rasterisiert nichts
- Es entwirft nicht Ihr Layout, nur eine Linie des Stylings
- Es ersetzt nicht den Exportschritt eines Design-Tools, sondern nur die manuelle Mathematik dahinter
Es ist auch nicht dasselbe wie ein Textschattengenerator, der Buchstabenformen anstelle von Elementboxen schattiert.
Was es tatsächlich erzeugt, ist eine Zeichenfolge von Code, die direkt in ein Stylesheet eingefügt werden kann.
Wie funktioniert die Box-Shadow Eigenschaft?
Die box-shadow-Eigenschaft (EN) zeichnet einen Schatten mit fünf Werten in einer festen Reihenfolge: horizontaler Offset, vertikaler Offset, Unschärferadius, Spreizradius und Farbe.
Wenn Sie einen Wert überspringen, greift der Browser auf die Standardeinstellung zurück, sodass ein Schatten mit nur zwei Zahlen weiterhin gerendert wird, jedoch ohne Unschärfe oder Ausbreitung.
| Wert | Controls | Bei Null oder negativ |
|---|---|---|
| Horizontaler Offset | Schattenposition, links oder rechts | Negativ schiebt den Schatten nach links |
| Vertikaler Offset | Schattenposition, oben oder unten | Negativ schiebt den Schatten nach oben |
| Unschärfenradius | Randweichheit | Zero gibt eine harte, scharfe Kante |
| Spreizradius | Gesamtschattengröße | Negativ schrumpft den Schatten |
Reihenfolge ist wichtig: Tauschen Sie Blur und Spread aus und der Browser liest die zweite Zahl als Spread, unabhängig von der Absicht.
Äußerer Schatten vs. Innenschatten
Äußerer Schatten: Das Standardverhalten liegt hinter dem Element, als ob die Box von der Seite abgehoben wäre.
Inset shadow: Das Hinzufügen des Schlüsselworts inset spiegelt den Effekt um, so dass der Schatten innerhalb der Kanten des Elements fällt, als ob er in die Oberfläche gedrückt würde.
Das Schlüsselwort steht immer zuerst in der Deklaration, vor allen numerischen Werten.
Welche Farbformate kann ein Box Shadow verwenden?
Eine Box-Shadow-Farbe akzeptiert jeden gültigen CSS-Farbwert: hex, rgb, rgba, hsl oder eine benannte Farbe wie schwarz.
rgba ist derjenige, der für Schatten am wichtigsten ist, weil sein vierter Wert die Transparenz steuert.
- Hex: nur Volltonfarbe, kein Transparenzkanal
- rgba: rot, grün, blau, plus ein Alphawert zwischen 0 und 1
- hsl / hsla: Farbton, Sättigung, Helligkeit, mit demselben optionalen Alpha-Slot
Ein Schatten mit voller Deckkraft sieht aus wie ein Block mit harten Kanten. Wenn man das Alpha auf etwa 0,15 oder 0,2 reduziert, wird es als Schatten anstelle einer Form angezeigt.
Designer übergeben Farben oft als Hex-Codes aus einem Mockup, und die Umwandlung dieses Hex-Wertes in rgba ist normalerweise der erste wirkliche Schritt, um die Ausgabe eines Generators mit einer Komposition zu vergleichen.
Dasselbe gilt für die andere Richtung. Wenn eine Palette in HSL erstellt wurde, bleibt die Schattenfarbe durch die Übersetzung einer HSL-Auswahl in rgb oder rgba mit dem Rest des Designsystems konsistent.
Wie überlagert man mehrere Schatten in einer Deklaration?
Trennen Sie die einzelnen Schatten durch ein Komma und der Browser stapelt sie in einer einzigen Box-Shadow-Deklaration.
Die Reihenfolge steuert die Tiefe: der erste aufgelistete Schatten sitzt oben, am nächsten zum Element, und jeder nach ihm sitzt weiter hinten.
Ein zweischichtiger Kartenschatten sieht oft so aus:
box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.15);Der erste Schatten ist eng und dunkel und erledigt die Nahaufnahmen. Die zweite ist größer und weicher und erzeugt die Illusion, dass das Umgebungslicht um das gesamte Objekt herum fällt.
- Zwei Schichten: ein enger Kontaktschatten und ein weicher Umgebungsschatten
- Drei Schichten: fügt einen dritten, noch weicheren Schatten für zusätzliche Tiefe auf großen Karten oder Modal hinzu
- Keine praktische Begrenzung der Ebenenanzahl, obwohl Browser langsamer werden, wenn Sie mehr als vier oder fünf Ebenen stapeln
Single-div CSS-Loader stützen sich ständig auf diesen Trick, indem sie einen Ring aus Punkten mit einem Element anstelle von sechs separaten Knoten vortäuschen.
Das ist die gleiche Layering-Technik hinter den meisten Einträgen in einem CSS-Loader-Generator.
Welche Browser unterstützen Box-Shadow und benötigen Sie ein Herstellerpräfix?
Nein, jeder aktuelle Browser rendert Box-Shadow ohne Präfix, und das schon seit mehr als einem Jahrzehnt.
Die Eigenschaft erreichte am 29. Januar 2018 den Baseline Widely Available Status, gemäß dem Web-Features-Datensatz, der die MDN-Kompatibilitätstabelle (EN) unterstützt.
Dieser Meilenstein kam tatsächlich Jahre, nachdem Browser die Eigenschaft bereits sicher nutzbar gemacht hatten.
- Chrome hat die -webkit-Präfix-Anforderung in Version 10, veröffentlicht im März 2011, gestrichen
- Firefox verzichtete auf -moz- bei Version 4, ebenfalls März 2011
- Safari folgte in Version 5.1, Mitte 2011
- Internet Explorer fügte Unterstützung ohne Präfix in Version 9 hinzu, seiner ersten CSS3-fähigen Version
Die zugrundeliegende Spezifikation, CSS Backgrounds and Borders Module Level 3 (EN), wird vom W3C immer noch als Candidate Recommendation Draft veröffentlicht, nicht als fertige Empfehlung.
Und das, obwohl die Box-Shadow-Eigenschaft selbst seit über einem Jahrzehnt in Browsern stabil ist.
Diese Lücke zwischen dem Spezifikationsstatus und der realen Zuverlässigkeit ist genau die Art von Sache, die cross-browser-kompatibilität (EN) Tests erfassen sollen.
Eine Eigenschaft, die auf Ihrem Rechner einwandfrei funktioniert, garantiert nicht, dass sie sich überall gleich verhält.
Alte Projekte tragen manchmal noch -webkit-box-shadow oder -moz-box-shadow Deklarationen, die von einem Jahrzehnte alten Standard überliefert sind. Wenn Sie sie heute löschen, ändert sich in keinem unterstützten Browser etwas.
Box Shadow Generator vs. CSS von Hand schreiben: Welchen solltest du verwenden?
Verwenden Sie einen Generator für einen einmaligen Schatten und greifen Sie zur manuellen Programmierung, wenn Sie ein Designsystem mit Dutzenden von ihnen pflegen.
Die beiden sind nicht wirklich Rivalen, sondern eher Werkzeuge, die für verschiedene Phasen derselben Aufgabe geeignet sind.
| Methode | Einfache Bedienung | Genauigkeit der Ausgabe | Am besten für |
|---|---|---|---|
| Generatorwerkzeug | Hoch, ziehen und kopieren | Gut für Einzelschatten | Schnelles Einmal-Styling |
| Browser-Entwicklertools | Mittel, benötigt ein vorhandenes Element | Exakte, aktuelle Werte | Feinabstimmung eines vorhandenen Schattens |
| Von Hand codiertes CSS | Niedrig, erfordert das Auswendiglernen der Syntax | Abhängig vom Coder | Designsysteme, wiederverwendbare Token |
| Design-Tool-Export | Hoch in Figma oder XD | Oft benötigt manuelle Bereinigung | Übergabe vom Design zum Code |
Devtools gewinnt an Genauigkeit, weil Sie ein echtes Element in einem echten Layout bearbeiten. Es gibt keine Vermutungen darüber, wie ein Wert aussehen wird, sobald er auf Ihrer tatsächlichen Seite abgelegt wird.
Hand-Coding gewinnt, sobald Schatten zu Token werden.
Ein Designsystem mit Höhe-1 bis Höhe-4 benötigt gemeinsame Variablen, nicht vier separat generierte Zeichenfolgen, die zufällig ähnlich aussehen.
Die meisten Frontend (EN)-Teams stehen vor dem gleichen Kompromiss mit einer völlig anderen Eigenschaft.
Ein kurzer Hintergrund beginnt oft das Leben in einem CSS-Verlaufsgenerator (EN).
Er wird normalerweise als handgeschriebene benutzerdefinierte Eigenschaften neu erstellt, sobald dieser Verlauf in fünf verschiedenen Komponenten leben muss.
Ein Generator kann dir auch nicht sagen, wann ein Schatten das falsche Werkzeug ist. Das ist eine Entscheidung, die kein Slider für Sie treffen wird.
Welcher Schattenstil passt zu welchem Designziel?
Vier Schattenstile decken die meisten realen Schnittstellen ab: weich, hart, neumorphisch und Materialhöhe.
Jede ist eigentlich nur eine andere Kombination aus Unschärfe, Streuung und Schichtung, die auf dieselbe Eigenschaft angewendet wird.
Soft Shadow
Ein weicher Schatten verwendet einen großen Unschärferadius und eine geringe Deckkraft, sodass der Rand ausgeblendet wird, anstatt abrupt zu stoppen.
Es ist die Standardauswahl für Karten, Modale und alles, was sich so anfühlen soll, als ob es sanft über der Seite ruht.
Vorteile:
- Liest sich ruhig und modern über fast jeden Hintergrund
- Verzeihen von kleinen Offset- oder Farbfehlern, da die Unschärfe scharfe Kanten verbirgt
Nachteile:
- Kann auf geschäftigen Hintergründen ausgewaschen oder kaum sichtbar aussehen
- Übermäßig über eine ganze Seite verwendet, signalisiert es keine Tiefe mehr
Die CSS-Schatteneffekte (EN)-Galerie bietet eine schnelle Möglichkeit, weiche Schatten nebeneinander auf Schaltflächen, Karten und Kopfzeilen anzuwenden.
Hard Shadow
Keine Unschärfe, etwas Spread, ein Offset, der leicht zu sehen ist. Das ist ein harter Schatten, und es liest sich eher als ein grafisches Element als ein Lichteffekt.
Pro: es verleiht Oberflächen eine ausgeprägte, fast retro Persönlichkeit, die weiche Schatten nicht vortäuschen können.
Nachteil: es kollidiert schlecht mit jeder UI, die bereits weich oder minimal neigt, da die beiden Stile nicht verschmelzen.
Brutalistisches und neo-brutalistisches Webdesign stützt sich ständig auf harte Schatten, oft gepaart mit dicken Rändern und flachen Farben anstelle von Verläufen.
Neumorphismus
Die nicht-textliche Kontrastregel (EN) von WCAG 2.1 erfordert ein 3:1-Verhältnis für interaktive Komponenten, und die meisten neumorphen Schnittstellen verfehlen dieses Design.
Der Stil basiert auf zwei Schatten, einem hellen und einem dunklen, die auf einem Hintergrund sitzen, der sich kaum vom Element selbst unterscheidet.
Genau das schafft das Problem des geringen Kontrasts.
| Pros | Cons |
|---|---|
| Unverwechselbare, taktile visuelle Identität | Fehlt häufig bei WCAG-Kontrastprüfungen |
| Starkes On-Brand-Feeling für Nischenprodukte | Interaktive Zustände sind schwer zu unterscheiden |
| Funktioniert gut für Dashboards, die von einem geschulten Publikum angezeigt werden | Schlechte Passform für öffentliche Zugänglichkeitsanforderungen |
Wenn du eher einen matten, durchscheinenden Look möchtest, ist das eine ganz andere Technik, die aus Hintergrundunschärfe und nicht aus geschichteten Schatten besteht.
Ein separater glassmorphism generator deckt diesen Stil ab.
Materialhöhe
Die Material Design elevation guidelines (EN) von Google ordnen die Schattentiefe einer z-Raumskala von 0 bis 24 zu.
Jede Stufe ist an einen bestimmten dp-Wert und einen etwas anderen Schatten gebunden.
Eine höhere Erhebung bedeutet einen größeren, weicheren Schatten, der ein Objekt nachahmt, das physisch näher an der Lichtquelle liegt.
Wo es sich hervorhebt: Konsistenz in einer großen App, da jede Komponente eine Ebene anstelle eines einmaligen Schattenwerts auswählt.
Das System skaliert sauber von Schaltflächen zu Modalen.
Wo es zu kurz kommt: Es ist ein vollständiges Design-System-Engagement, übertrieben für eine einzelne Marketing-Seite, die nur einen schönen Kartenschatten benötigt.
Beeinflusst Box-Shadow die Seiten-Rendering-Leistung?
Ja, mehr als die meisten Immobilien. Box-Shadow zwingt den Browser, Pixel bei jedem Frame, der sich ändert, neu zu malen. Das ist einer der teureren Schritte in der Rendering-Pipeline.
Googles Dokumentation zur Rendering-Leistung (EN) legt das Frame-Budget auf etwa 16 Millisekunden fest, um 60 Bilder pro Sekunde zu halten, was Skripts, Stil, Layout und Farbe zusammen umfasst.
Die Malerei wird in derselben Dokumentation als einer der teuersten Teile dieses Budgets ausgewählt.
- Das Animieren von Box-Shadow löst direkt ein Repaint auf jedem einzelnen Frame aus
- Durch das Animieren der Deckkraft oder Transformation wird diese Neulackierung nahezu vollständig vermieden
- Ein statischer, nicht animierter Schatten kostet nichts extra, sobald die Seite gemalt wurde
Tobias Ahlins Rendering-Tests (EN) fanden eine Umgehung: legen Sie den Schatten auf ein Pseudo-Element und animieren Sie die Deckkraft dieses Elements anstelle des Schattens selbst.
Das visuelle Ergebnis sieht identisch aus wie beim direkten Animieren von Box-Shadows, nur ohne den Malschritt auf jedem Frame zu hämmern.
Wann gilt box-shadow nicht?
Box-Shadow hört auf, das richtige Werkzeug zu sein, sobald die gewünschte Form kein Rechteck ist.
Die Eigenschaft folgt immer der Box des Elements oder seinem Randradius, falls einer festgelegt ist. Es hat keine Ahnung, was sich in dieser Box befindet.
- Transparente PNGs und Logos: Verwenden Sie stattdessen filter: drop-shadow(), da dieser dem Alphakanal des Bildes und nicht seinem rechteckigen Rahmen folgt
- Unregelmäßige Vektorformen: ein nativer SVG-Filter zeichnet den eigentlichen Pfad anstelle eines Begrenzungsrahmens
- Günstige, konstante Animation: Box-Shadow erzwingt eine Neuzeichnung auf jedem Frame, daher ist ein animiertes Pseudo-Element die bessere Wahl
- Print Stylesheets: Die meisten Browser entfernen standardmäßig den Schatten beim Drucken
Der zweite Fall ist am wichtigsten für Logos und Icons, die in SVG (EN) erstellt wurden, wo ein rechteckiger Schatten hinter einem Stern oder einer Logoform offensichtlich falsch aussieht.
MDNs eigene Dokumentation zu filter: drop-shadow() (EN) macht die Unterscheidung explizit: box-shadow schattet die Box, drop-shadow schattet den Inhalt.
Auch der exportierte Schatten eines Designtools kann nicht sauber übersetzt werden. Der Schlagschatteneffekt von Figma (EN) ähnelt weitgehend dem Kastenschatten, aber ein aus geschichteten Füllungen erstelltes Leuchten hat normalerweise überhaupt kein sauberes CSS-Äquivalent.
Wie benutzt man einen CSS-Box-Shadow-Generator, Schritt für Schritt?
Die Reihenfolge unten entspricht der tatsächlichen Anordnung der meisten Generatoren, von links nach rechts, von oben nach unten.
- Schritt 1: Wählen Sie zuerst den horizontalen und vertikalen Offset, da diese vor allem entscheiden, wo der Schatten sitzt
- Schritt 2: Legen Sie den Unschärferadius fest, um zu steuern, wie weich oder scharf die Kante aussieht
- Schritt 3: Passen Sie den Spreizradius nur an, wenn der Schatten größer oder kleiner aussehen soll als das Element selbst
- Schritt 4: Farbe und Deckkraft als letztes festlegen, da die Dunkelheit eines Schattens erst Sinn macht, wenn Größe und Form festgelegt sind
- Schritt 5: Schalten Sie Einfügen ein, wenn der Schatten innerhalb des Elements anstatt dahinter sitzen soll
- Schritt 6: Vorschau des Ergebnisses gegen die tatsächliche Hintergrundfarbe, auf der das Element sitzen wird, nicht die Standardleinwand des Generators
- Schritt 7: Kopieren Sie die generierte Box-Shadow-Deklaration und fügen Sie sie in die Stylesheet-Regel des Elements ein
Die Vorschau vor dem falschen Hintergrund ist der häufigste Grund, warum ein Schatten im Werkzeug perfekt aussieht und auf der Live-Seite falsch.
Der Standard-Vorschaubereich eines Generators ist normalerweise schlicht weiß oder hellgrau, was fast jedem Schattenwert schmeichelt.
Wie fügen Sie generierten Box-Shadow-Code in Tailwind CSS, Sass oder Bootstrap ein?
Ein Generator übergibt Ihnen einen rohen Box-Shadow-String. Was Sie als nächstes damit machen, hängt davon ab, welches Framework das Projekt bereits verwendet.
| Framework | Wohin der Wert geht | Ergebnis |
|---|---|---|
| Tailwind CSS | boxShadow-Schlüssel in der Theme-Konfiguration oder eine beliebige Wertklasse | shadow-brand oder shadow-[value] Dienstprogramm |
| Sass | Eine variable oder wiederverwendbare Mixin | $shadow-card: 0 2px 4px rgba(0,0,0,0.2); |
| Bootstrap | Überschreiben einer von drei Sass-Schattenvariablen | $box-shadow, $box-shadow-sm oder $box-shadow-lg |
Tailwind (EN) wird mit einer festen Schattenskala aus der Box geliefert.
Seine aktuelle v4-Dokumentation (EN) listet sieben Größen-Dienstprogramme auf, von shadow-2xs bis hin zu shadow-2xl.
Jeder von ihnen wird einer CSS-Variable zugeordnet und nicht einem fest codiertem Wert.
Die Ausgabe eines Generators in Tailwind zu platzieren bedeutet entweder, eine dieser sieben Variablen zu ersetzen oder einmalig auf die beliebige Syntax shadow-[value] zurückzugreifen.
Sass nimmt den Wert so wie er ist. Indem man sie als Variable speichert, zum Beispiel $shadow-card, verwandelt man eine einmalige Generatorausgabe in etwas, das über eine ganze Komponentenbibliothek hinweg wiederverwendbar ist.
Bootstrap (EN) ist das starrste der drei.
Seine offizielle Dokumentation (EN) definiert genau vier Shadow-Klassen, shadow-none, shadow-sm, shadow und shadow-lg, die aus drei Sass-Variablen aufgebaut sind.
Der benutzerdefinierte Wert eines Generators wird nicht direkt in Bootstrap eingefügt. Es muss eine dieser drei Variablen ersetzen, bevor es neu kompiliert oder als Inline-Stil angewendet wird.
Das Polaris-Designsystem von Shopify geht mit dem Token-Ansatz einen Schritt weiter.
Es definiert benannte Schattentiefen in seinem eigenen Token-Paket, anstatt einzelne Komponenten rohe Box-Shadow-Strings tragen zu lassen. Das ist der gleiche Instinkt hinter einer Sass-Variable, nur formalisiert als ein tatsächliches Design-System.
Was sind die häufigsten Box-Shadow-Fehler?
Die meisten Box-Shadow-Fehler kommen auf eine Handvoll wiederholbarer Fehler zurück.
- Fehlendes Komma zwischen mehrschichtigen Schatten
- Unschärfe- und Streuwerte ausgetauscht
- Einsatz in der falschen Position platziert
- Schattenfarbe bei voller Deckkraft links
Zwei davon sind stumm. Der Browser gibt keinen Fehler aus, er rendert nur etwas, das nicht dem entspricht, was Sie beabsichtigt haben.
| Mistake | Wie es aussieht | Fix |
|---|---|---|
| Fehlendes Komma | Zweiter Schatten wird ignoriert oder bricht die gesamte Deklaration | Trennen Sie jeden Schatten mit einem Komma, kein Leerzeichen |
| Unschärfe und Streuung ausgetauscht | Schattenballons weit über den Rand des Elements hinaus | Die Reihenfolge beibehalten: Offset-x, Offset-y, Unschärfe, Streuung, Farbe |
| Einsatz zuletzt platziert | Die Deklaration ist ungültig und kein Schatten wird gerendert | Inset kommt immer zuerst, vor allen Zahlen |
| Farbe mit voller Deckkraft | Schatten wird als ein fester Block anstelle eines Schattens gelesen | Verwenden Sie rgba mit einem Alpha um 0,15 bis 0,3 |
Grenzradius-Unstimmigkeiten verursachen ein leiseres Problem. Ein Schatten auf einem abgerundeten Element folgt weiterhin automatisch dem Randradius.
Ein Schatten, der gegen abgerundete Ecken eckig aussieht, bedeutet normalerweise, dass der Radius auf einem untergeordneten Element festgelegt wurde, nicht auf dem Element, das den Schatten trägt.
Transparente Hintergründe verursachen eine ähnliche Verwirrung. Ein Schatten wird um die Box des Elements gerendert, nicht um alles, was darin sichtbar ist.
Ein transparentes PNG in einem div wird immer noch einen rechteckigen Schatten zeigen, egal wie unregelmäßig das Bild selbst aussieht.
Häufige Fragen: CSS-box-shadow-Generator
Was ist der Unterschied zwischen Box-Shadow und Text-Shadow?
text-shadow schattiert die Buchstabenformen des Textinhalts, während box-shadow die gesamte border-box des Elements schattiert.
Eine Überschrift kann beides gleichzeitig tragen: einen Text-Schatten hinter ihren Zeichen und einen separaten Box-Schatten hinter dem Container, der sie enthält.
Funktioniert box-shadow korrekt mit border-radius auf abgerundeten Elementen?
- Ja. - Ja. Ein Box-Shadow folgt automatisch dem border-radius eines Elements und krümmt sich an den gleichen Ecken, anstatt rechteckig zu bleiben. Wenn ein Schatten auf einem abgerundeten Element eckig aussieht, sitzt der Radius auf einem Kindelement, nicht auf dem, das den Schatten trägt (siehe häufige Fehler).
Kann Box-Shadow mit CSS-Übergängen animiert werden?
Technisch gesehen ja, aber es hat seinen Preis: Der Übergang von Box-Shadow zwingt den Browser dazu, bei jedem Frame neu zu zeichnen. Eine glattere Alternative animiert die Deckkraft eines Pseudoelements, das bereits den Schatten trägt, wie im Abschnitt Leistung behandelt.
Wie macht man einen Box-Shadow-Wert responsiv für alle Bildschirmgrößen?
Skalieren Sie Versatz, Unschärfe und Streuung innerhalb einer Medienabfrage, wobei jeder Wert zusammen geschrumpft wird, wenn sich das Ansichtsfenster verengt.
Ein übliches Muster verwendet clamp() nur für den Unschärferadius, wodurch eine Deklaration reibungslos angepasst werden kann, anstatt eine separate Regel pro Haltepunkt zu schreiben.
Wie verwenden Sie generiertes CSS in mehreren Projekten?
Speichern Sie die Deklaration einmalig in einer CSS-Eigenschaft wie --shadow-card, anstatt denselben String in jedes Stylesheet einzufügen.
Jedes Projekt, das die gemeinsam genutzte Eigenschaftsdatei importiert, erbt denselben Schattenwert, und eine einzelne Bearbeitung aktualisiert ihn überall.
Wo bricht ein CSS-Box-Shadow-Generator zusammen?
Ein CSS-Box-Schattengenerator bricht zusammen, wenn ein Projekt mehr als ein Dutzend unterschiedliche Schattenwerte in seiner Komponentenbibliothek sammelt. An diesem Punkt ersetzt ein gepflegtes Tokensystem die einmalige Generatorausgabe.
Die Behebung dieser Ausbreitung folgt einer bestimmten Reihenfolge, nicht einem zufälligen Bereinigungsdurchgang.
- Cross-Browser-Rendering zuerst prüfen
- Doppelte Wertkonsolidierung zweiter
- Token-Extraktion in eine gemeinsam genutzte Design-Token-Datei dritter
Wenn Sie zunächst das Rendering überprüfen, wird der seltene Fehler erkannt, bevor er in ein Dutzend Komponenten integriert wird. Durch die zweite Konsolidierung nahezu doppelter Werte wird das Rauschen beseitigt, das die Token-Extraktion schmerzhaft macht.
Die Standardisierung von Schatten in einen festen Tokensatz kostet Flexibilität. Eine Komponente kann nicht länger eine beliebige Abstimmung ohne einen kleinen Build-Schritt anfordern, wobei einmaliges Polieren für Konsistenz über die gesamte Schnittstelle eingetauscht wird.
Der nächste natürliche Schritt besteht darin, die Ecken desselben Elements mit einem speziellen Randradiusgenerator abzurunden, da Schattentiefe und Eckenradius auf fast jeder Karte oder Schaltfläche aufeinander abgestimmt werden.