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

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

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ß!

Keine Lust, den Liquid-Glass-Look selbst zu bauen? Ich gestalte dir eine moderne, blitzschnelle Website — die du danach selbst pflegst. Persönlich, ohne Agentur, ab 2.500 €. → Kostenlose Website-Analyse sichern

„Glas-Effekte wirken modern, solange Lesbarkeit vorgeht. Setz Liquid Glass für Akzente ein, nicht für Fließtext.“

Thomas Gress, WordPress- und Elementor-Experte

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.
• Beim ausgewählten Element (jegliches Widget, Container) unter Erweitert > CSS-Klasse und gibst dort glass ein.

• Achte darauf, dass das Element keinen Background hat.

• Jetzt wird der Glass Effekt sichtbar

.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%);
}

Diesen Code kannst du anpassen, wie du möchtest. Füge ihn einfach in eine AI ein.
Die Ecken weniger rund? Background Farbe? Mehr oder weniger durchsichtig?
Lasse deiner Kreativität freien lauf.

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!

Keine Lust, den Liquid-Glass-Look selbst zu bauen? Ich gestalte dir eine moderne, blitzschnelle Website — die du danach selbst pflegst. Persönlich, ohne Agentur, ab 2.500 €. → Kostenlose Website-Analyse sichern

Häufige Fragen (FAQ)

• Brauche ich Programmierkenntnisse? Nein, Elementor Pro macht’s einfach!
• Funktioniert das überall? Ja, mit Elementor Pro anpassbar.
• Wie lange dauert es? Etwa 5-10 Minuten – probier’s aus!

Na, bereit, deine Website zum Glanzstück zu machen? Teste den Effekt und lass mich wissen, wie es läuft! 😄

Häufige Fragen

Was ist der Liquid Glass Effekt?

Ein Designstil von Apple mit transparenten Flächen, die den Hintergrund leicht verschwommen durchscheinen lassen, ähnlich wie Milchglas mit Lichtreflexen.

Brauche ich Elementor Pro für den Effekt?

Für den Custom-CSS-Bereich ja. Mit Elementor Free kannst du den CSS-Code alternativ im WordPress-Customizer unter „Zusätzliches CSS“ einfügen.

Funktioniert backdrop-filter in allen Browsern?

In allen aktuellen Browsern wie Chrome, Safari, Edge und Firefox. In sehr alten Browsern fehlt nur der Unschärfe-Effekt, der Inhalt bleibt lesbar.

Wirkt sich der Effekt auf die Ladezeit aus?

Kaum. Er wird per CSS erzeugt und braucht keine zusätzlichen Bilder. Auf sehr schwachen Geräten können viele Blur-Flächen das Scrollen etwas verlangsamen.

Passend dazu

• So erstellst du ein Popup mit Elementor Pro: Der ultimative Guide für mehr Interaktionen auf deiner Website
• Elementor v4 Editor ist da: Vom Page Builder zum professionellen Design-System
• Figma zu Elementor in Minuten: Wie ich mit UiChemy 70–90 % Zeit spare

Du willst so ein modernes Design für deine eigene Seite? Ich baue dir eine Landingpage in 48 Stunden.