Servus! > > Ich hab dafür mal ein Fiddle erstellt: [Beispiel](https://jsfiddle.net/g4sdx5tw/3/) > > An und für sich funktioniert es schon ganz ok, finde ich auch! Du könntest `background: linear-gradient(180deg, rgba(8,8,8,1) 0%, var(--color) 50%, rgba(11,11,11,1) 100%);` vereinfachen, indem du analog zu `--i` den Farbwert als custom property einsetzt. Dann wären die Klassen überfüssig. Evtl. könntest du anstelle der z-index eine 3d-Transformation um das Logo herumführen und hättest da einen besseren optischen Effekt. * [CSS/Tutorials/Transform/3D-Transforms](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Transform/3D-Transforms) Grad geschaut: mix-blend-mode ist leider nicht animierbar * [CSS/Tutorials/Vermischen_mit_Blend-Modes](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Vermischen_mit_Blend-Modes) Herzliche Grüße Matthias Scharwies -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“

Servus! > > Ich hab dafür mal ein Fiddle erstellt: [Beispiel](https://jsfiddle.net/g4sdx5tw/3/) > > An und für sich funktioniert es schon ganz ok, finde ich auch! Du könntest `background: linear-gradient(180deg, rgba(8,8,8,1) 0%, var(--color) 50%, rgba(11,11,11,1) 100%);` vereinfachen, indem du analog zu `--i` den Farbwert als custom property einsetzt. Dann wären die Klassen überfüssig. Evtl. könntest du anstelle der z-index eine 3d-Transformation um das Logo herumführen und hättest da einen besseren optischen Effekt. Grad geschaut: mix-blend-mode ist leider nicht animierbar * [CSS/Tutorials/Vermischen_mit_Blend-Modes](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Vermischen_mit_Blend-Modes) Herzliche Grüße Matthias Scharwies -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“