Hallo an alle! Heute habe ich durch den Newsfeed gescrollt und festgestellt, dass eine ziemlich große Anzahl von Anfragen dem Thema gewidmet ist: „Wie erstelle ich einen Verlaufsschatten mit CSS?“. Es wurde interessant, mich mit diesem Thema alleine zu beschäftigen 🙂

Als Experiment erstellen wir mit CSS einen Verlaufsschatten für zwei Farben: Rot und Blau.

.box {
box-shadow: 0 0 10px 5px rgba(128,0,128,0.5), 
0 0 20px 10px rgba(255,0,0,0.5);
}

In diesem Beispiel verwenden wir zwei Schatten, einen mit violetter Startfarbe (rgba(128,0,128,0,5)) und einen mit roter Endfarbe (rgba(255,0,0,0,5)). Der erste Schatten hat einen größeren Radius (20 Pixel) als der zweite Schatten (10 Pixel) – dies erzeugt die Illusion eines Farbverlaufs.

Ein Beispiel zum Erstellen eines Verlaufsschattens mit CSS finden Sie hier. Und ja – wie immer, wenn Sie Fragen haben, schreiben Sie an die Mail oder Telegram.