Was ist der CSS-Box-Schattengenerator?
Der CSS-Box-Schattengenerator ist ein visueller Editor für die CSS-Box-Shadow-Eigenschaft. Sie passen Offset, Unschärferadius, Spreizradius, Farbe und Deckkraft mit Schiebereglern an und sehen das Ergebnis live auf einem Vorschauelement und kopieren dann das genaue CSS. Anstatt Pixelwerte zu erraten und die Seite neu zu laden, formen Sie den Schatten direkt und lesen den von ihm erzeugten Code.
Öffnen Sie diesen CSS-Box-Schattengenerator und er startet auf der Card-Voreinstellung, zwei Ebenen, die als Box-Shadow kopieren: 0 px 4px 6px -1px #000001 a, 0px 2px 4px -2px #000001 a; Der Opacity-Slider wird in die Hex-Farbe eingebrannt, so dass 10% am Ende zum 1 a werden Klicken Sie auf die innere Voreinstellung und die Deklaration ändert sich in Box-Shadow: 0px 4px #0p00x 3.
Die Box-Shadow-Eigenschaft ist täuschend tief. Eine einzelne Deklaration kann mehrere Schatten mit jeweils eigenen Offsets, Unschärfe, Ausbreitung, Farbe und einem optionalen Einfügungsschlüsselwort stapeln, das den Schatten im Element und nicht nach außen malt. Echte Schnittstellenschatten verwenden fast immer zwei oder mehr Ebenen, um natürlich auszusehen, was beim Handschreiben mühsam ist. Dieses Tool verwaltet die Layer für Sie und gibt eine Spezifikations-gültige Deklaration in der richtigen durch Kommas getrennten Reihenfolge aus.
Alles passiert in Ihrem Browser. Wählen Sie ein Preset aus, stimmen Sie die Ebenen ab, wechseln Sie die Vorschau zwischen hellen und dunklen Hintergründen und kopieren Sie entweder die Standardeigenschaft oder einen Block, der auch das Präfix -webkit- enthält. Kein Konto, kein Upload und es funktioniert weiterhin offline, sobald die Seite geladen wurde.
Schatten werden außerhalb des Kastens gemalt und nehmen keinen Platz ein, also schieben sie Nachbarn niemals herum und werden von jedem Vorfahren mit verstecktem Überlauf abgeschnitten. Die Ausbreitung ist der am wenigsten verstandene Wert: Sie wächst oder schrumpft die Schattenform, bevor sie verschwimmt. Eine positive Ausbreitung mit null Unschärfe ergibt also einen festen versetzten Umriss, wodurch Grenzeffekte gefälscht werden, ohne das Layout zu beeinträchtigen. Der Einschub bewegt den Schatten innerhalb des Elements, nützlich für gedrückte Zustände und innere Leuchten. Durch die Schichtung mehrerer Schatten mit zunehmendem Versatz und Unschärfe wird eine überzeugende Tiefe aufgebaut, da eine einzelne große Unschärfe als Nebel und nicht als Schatten liest. Jede Schicht kostet Zeit, und Schatten, die während des Scrollens oder Animationen neu lackern, sind eine häufige Quelle von Jank auf Geräten mit geringererleistung.
Wie verwende ich den CSS-Box-Schattengenerator?
Beginnen Sie mit einer voreingestellten oder leeren Ebene
Die Seite öffnet sich auf der Voreinstellung Karte Wählen Sie eine andere wie Elevated oder Neumorphic für einen anderen Startpunkt, oder bearbeiten Sie die aktuellen Ebenen direkt.
Stimmen Sie den Schatten mit Schiebereglern ab
Ziehen Sie den horizontalen und vertikalen Versatz, den Unschärferadius und die Spreizradiusschieber, stellen Sie die Schattenfarbe und Opazität ein und kreuzen Sie Einsetzen an, um den Schatten innerhalb des Feldes zu bewegen.
Stapeln Sie bei Bedarf weitere Ebenen
Klicken Sie auf Ebene hinzufügen für Tiefe - ein weicher breiter Schatten unter einem engeren dunkleren liest sich als natürliche Erhebung Neue Ebenen gehen am Ende, die sie unter früheren lackieren; es gibt keine Neuordnung, also eine Ebene verschieben, löschen Sie es mit seinem Papierkorb-Symbol und bauen Sie es mit Ebene hinzufügen wieder auf.
Kopieren Sie das CSS
Kopieren Sie die Box-Shadow-Deklaration oder den vorangestellten Block für ältere Browser und fügen Sie sie direkt in Ihr Stylesheet oder Ihre Komponentenstile ein.
Hauptmerkmale
Mehrschichtschatten
Stapeln Sie eine beliebige Anzahl von Schattenebenen in der richtigen Reihenfolge von oben nach unten in einer Deklaration, in der die reale Karten- und modale Höhe erstellt wird
Volle Eigenschaftskontrolle
Schieberegler für horizontalen und vertikalen Versatz, Unschärferadius und Streuradius sowie einen Farbwähler, eine Opazitätssteuerung und einen eingefügten Umschalthebel für jeden Teil der Grammatik
Live-Vorschau
Ein Vorschauelement wird beim Bearbeiten sofort aktualisiert und Sie können den Hintergrund zwischen hell und dunkel umschalten, um zu überprüfen, wie der Schatten in beiden Themen gelesen wird
Voreinstellungen
Kuratierte Rezepte für subtile, karten, erhöhte, schwebende, innere, glühende, neumorphe und scharfe Schatten geben Ihnen einen bewährten Ausgangspunkt anstelle einer leeren Leinwand
Frequently Asked Questions
Related Tools
CSS Border Radius Generator
Round any corner with a live preview and per-corner sliders, switch between px, %, em, and rem, and copy the shortest valid CSS border-radius.
CSS Clamp Generator
Generate fluid, responsive CSS clamp() values that scale between viewports
CSS Unit Converter
Convert between CSS units - px, rem, em, pt and % - with a configurable root font size, instant all-units output, and a px-to-rem reference table for responsive typography.
Flexbox Generator
Build CSS flexbox layouts visually. Adjust justify-content, align-items, direction, wrap and gap with a live preview, then copy the generated CSS - all in your browser.
Comments
0 comments
No comments yet. Be the first to share your thoughts!