box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;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.
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.
Wählen Sie eine voreingestellte Karte, erhöht oder neumorphisch, um einen realistischen Ausgangspunkt zu erhalten, oder beginnen Sie mit einer einzelnen Standardschattenebene und bauen Sie von dort aus auf.
Ziehen Sie die Schieberegler für horizontale und vertikale Versatz, Unschärfe und Streuradius, legen Sie die Schattenfarbe und Deckkraft fest und schalten Sie die Einfügung ein, um den Schatten innerhalb der Box zu bewegen.
Fügen Sie zusätzliche Schattenebenen für die Tiefe hinzu - Ein weicher, breiter Schatten unter einem engeren dunkleren liest sich als natürliche Höhe. Ordnen oder entfernen Sie Ebenen neu, während Sie den Look verfeinern.
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.
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
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
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
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
Create beautiful CSS gradients with live preview
Pick colors and convert between HEX, RGB, and HSL formats
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
0 comments
No comments yet. Be the first to share your thoughts!