Box-shadow Generator

Dieses Tool ermöglicht es Ihnen, CSS-box-shadow-Effekte zu erstellen, um Box-Schattierungen zu Ihren CSS-Objekten hinzuzufügen.

Der Box-shadow-Generator erlaubt es Ihnen, ein oder mehrere Box-Schattierungen zu einem Element hinzuzufügen.

Beim Öffnen des Tools finden Sie ein Rechteck im oberen rechten Bereich des Tools. Das ist das Element, auf das Sie Schatten anwenden werden. Wenn dieses Element ausgewählt ist (so wie es beim ersten Laden der Seite der Fall ist), können Sie einige grundlegende Stiländerungen vornehmen:

• Setzen Sie die color des Elements mit dem Farbauswahl-Tool fest.
• Geben Sie dem Element einen border, indem Sie das "border"-Kontrollkästchen verwenden.
• Verwenden Sie die Schieberegler, um die top, left, width und height-Eigenschaften des Elements festzulegen.

Um einen Box-Schatten hinzuzufügen, klicken Sie auf die "+"-Schaltfläche oben links. Dadurch wird ein Schatten hinzugefügt und dieser wird in der linken Spalte aufgelistet. Nun können Sie die Werte des neuen Schattens festlegen:

• Setzen Sie die color des Schattens mit dem Farbauswahl-Tool fest.
• Setzen Sie den Schatten mithilfe des "inset"-Kontrollkästchens auf "inset".
• Verwenden Sie die Schieberegler, um die Position, die Unschärfe und die Ausbreitung des Schattens festzulegen.

Um einen weiteren Schatten hinzuzufügen, klicken Sie erneut auf "+". Nun werden alle von Ihnen festgelegten Werte auf diesen neuen Schatten angewendet. Ändern Sie die Reihenfolge, in der diese beiden Schatten angewendet werden, mit den ↑ und ↓ Schaltflächen oben links. Wählen Sie den ersten Schatten erneut aus, indem Sie ihn in der linken Spalte anklicken. Um die Stile des Elements selbst zu aktualisieren, wählen Sie es aus, indem Sie oben auf die Schaltfläche "element" klicken.

Sie können dem Element ::before und ::after Pseudo-Elemente hinzufügen und ihnen ebenfalls Box-Schattierungen geben. Um zwischen dem Element und seinen Pseudo-Elementen zu wechseln, verwenden Sie die oben mit "element", ":before" und ":after" beschrifteten Tasten.

Das Feld unten rechts enthält das CSS für das Element und alle before::- oder ::after-Pseudo-Elemente.