Gestalten Sie Box-Schatten visuell — passen Sie Versatz, Unschaerfe, Ausdehnung, Farbe und Deckkraft an und kopieren Sie das CSS.
Die box-shadow-Eigenschaft gibt flachen Elementen Tiefe. Sie nimmt fuenf Werte: den horizontalen Versatz, den vertikalen Versatz, den Unschaerfe-Radius, den Ausdehnungs-Radius und die Farbe. Ein subtiler Schatten mit grosser Unschaerfe und kleinem Versatz wirkt wie Erhabenheit; ein enger Schatten mit starkem Versatz wirkt wie eine harte Kante. Designer stimmen diese Zahlen nach Gefuehl ab, was bedeutet, Schieberegler zu ziehen und das Ergebnis zu sehen — genau das tut dieses Tool.
Die Vorschau-Box in der Mitte zeigt den Schatten, waehrend Sie die Schieberegler bewegen. Die CSS-Zeile darunter aktualisiert sich in Echtzeit: Kopieren Sie sie und fuegen Sie sie in Ihr Stylesheet ein. Das Tool unterstuetzt auch Inset-Schatten, die innerhalb des Elements statt ausserhalb malen — nuetzlich fuer gedrueckte Buttons, Eingabefelder und vertiefte Panels.
Alles laeuft in Ihrem Browser. Die Vorschau ist ein echtes CSS box-shadow, angewendet auf ein div, keine Darstellung oder Annaeherung. Was Sie hier sehen, werden Ihre Nutzer sehen.
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color
Er erweitert oder verkleinert den Schatten vor dem Weichzeichnen. Ein positiver Spread macht den Schatten groesser als das Element; ein negativer macht ihn kleiner. Null bedeutet, der Schatten hat die gleiche Groesse wie das Element.
Ja, im CSS. Dieses Tool generiert einen Schatten. Um weitere hinzuzufuegen, trennen Sie sie in Ihrem Stylesheet mit Kommas.
Er malt den Schatten innerhalb des Elements statt ausserhalb. Nuetzlich fuer gedrueckte Buttons oder vertiefte Panels.
Ja. Der Schatten folgt automatisch dem border-radius des Elements.
Weil der Deckkraft-Schieberegler einen Alphakanal braucht. Hex-Farben sind deckend; rgba laesst den Schatten halbtransparent sein, was natuerlicher aussieht.
Vai.la verwandelt jede URL in einen Kurzlink mit Klick-Statistiken, QR-Code und Ihrem eigenen Biolink.
Vai.la übernimmt keine Verantwortung für die Nutzung der Tools oder für Entscheidungen, die auf ihren Ergebnissen basieren.