Generátor Glassmorphism CSS — Tvorba Skleněných UI Prvků

Glassmorphism je populární designový styl s poloprůhlednými prvky a efekty rozmazání pozadí. Náš generátor vytváří kompletní CSS kód pro glassmorphism efekty.

Technika glassmorphism

background: rgba(255, 255, 255, 0.1) pro poloprůhlednost. backdrop-filter: blur(10px) pro efekt rozmazání pozadí. border: 1px solid rgba(255,255,255,0.2) pro světlý okraj. box-shadow pro hloubku. Všechny čtyři dohromady vytvářejí skleněný efekt.

Požadavky pro glassmorphism

Glassmorphism funguje pouze na barevném pozadí — na bílém nevypadá působivě. Jako pozadí použijte přechod nebo obrázek. backdrop-filter má širokou podporu prohlížečů (>94 %), ale vyžaduje předponu -webkit- pro Safari.

Přístupnost

Zkontrolujte kontrast textu na skleněných prvcích — text na poloprůhledných pozadích má proměnnou čitelnost v závislosti na základním obsahu. Přidejte záložní barvu pozadí pro prohlížeče bez backdrop-filter.