Liquid Glass Design im Webdesign: So baust du Apples Look mit Elementor Pro nach! 🎉

Hallo zusammen! Hast du schon von Apples neuer „Liquid Glass“-Ästhetik gehört? Dieser moderne, fließende Look mit Glas-Effekten sorgt für Aufsehen – und das Beste: Du kannst ihn ganz einfach mit Elementor Pro in dein Webdesign einbauen! Heute zeige ich dir, wie das mit nur ein paar CSS-Zeilen geht, ohne dass du ein Programmierprofi sein musst. Los geht’s! 😄

Was ist der Liquid Glass Effekt?

Der Liquid Glass Effekt kombiniert Transparenz, sanfte Schatten und fließende Übergänge, um ein futuristisches, ätherisches Gefühl zu erzeugen – perfekt für Websites, die Eindruck machen sollen. Apple nutzt ihn, um Produkte wie iPhones oder Macs ins Rampenlicht zu rücken.

Einige Elemente auf meiner Startseite haben den Liquid Glass Effekt! Heiß!

So integrierst du den Effekt mit Elementor Pro

Füge einfach den folgenden CSS-Code in den „Custom CSS“-Bereich von Elementor Pro ein:

Gehe in Elementor zu Website Einstellungen und klicke auf Individuelles CSS.
Füge dort den CSS Code ein den du hier im Blogartikel findest.
Öffne die „Advanced“-Einstellungen des Elementes, dem du das Liquid Glass verpassen willst und scrolle zu „Custom CSS“.
Beim ausgewählten Element > CSS-Klasse und gibst dort glass ein.
Achte darauf, dassdas Element keinen Background hat.

.glass {
position: relative;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(2px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 2rem;
box-shadow: 0 8px 32px rgba(31, 38, 135, 0.2),
inset 0 4px 20px rgba(255, 255, 255, 0.3);
}

.glass::after {
content: “;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
border-radius: 2rem;
backdrop-filter: blur(1px);
box-shadow: inset -10px -8px 0px -11px rgba(255, 255, 255, 1),
inset 0px -9px 0px -8px rgba(255, 255, 255, 1);
opacity: 0.6;
z-index: -1;
filter: blur(1px) drop-shadow(10px 4px 6px black) brightness(115%);
}

Natürlich können wir noch nicht exakt den Liquid Glass Effekt wie bei Apple nachmachen. Aber das kommt noch! 😊

Die Technologie entwickelt sich rasant, und mit jedem Update von Elementor Pro oder neuen CSS-Funktionen kommen wir dem originalen Apple-Look näher. Bleib dran – die Zukunft des Webdesigns ist zum Greifen nah!