Generator CSS Glassmorphism — Crearea Elementelor UI de Sticlă

Glassmorphism este un stil de design popular cu elemente semi-transparente și efecte de blur de fundal. Generatorul nostru produce codul CSS complet pentru efectele glassmorphism.

Tehnica glassmorphism

background: rgba(255, 255, 255, 0.1) pentru semi-transparență. backdrop-filter: blur(10px) pentru efectul de estompare a fundalului. border: 1px solid rgba(255,255,255,0.2) pentru marginea ușoară. box-shadow pentru adâncime. Toate patru împreună creează efectul de sticlă.

Cerințele pentru glassmorphism

Glassmorphism funcționează doar cu un fundal colorat — pe alb nu arată impresionant. Folosește un gradient sau o imagine ca fundal. backdrop-filter are suport larg în browsere (>94%), dar necesită prefixul -webkit- pentru Safari.

Accesibilitate

Verifică contrastul textului pe elementele de sticlă — textul pe fundaluri semi-transparente are lizibilitate variabilă în funcție de conținutul de dedesubt. Adaugă o culoare de fundal de rezervă pentru browserele fără backdrop-filter.