Generator CSS glassmorphism

Generator CSS glassmorphism

Construiți o regulă CSS completă și gată de lipit pentru un panou cu efect sticlă mată sau o suprafață neumorfică moale fără a digita manual nicio valoare. Alegeți glassmorphism pentru un card translucid care estompează orice se află în spatele lui — aspect utilizat în panourile de control moderne, ecrane de conectare și modale — sau neumorfism pentru o suprafață care pare modelată din același material ca fundalul, utilizând o pereche de umbre moi opuse în loc de transparență.

Opțiunile se mapează direct la proprietățile pe care le scrie unealta. În modul sticlă, opacitatea suprafeței și intensitatea blur controlează alfa-ul de fundal și blur-ul backdrop-filter, în timp ce grosimea marginii și luminozitatea marginii setează o margine subțire și semi-transparentă care menține panoul lizibil pe funduri ocupate. Distanța umbrelor și suavitatea modelează umbra de proiecție sub panou, iar comutatorul de formă o schimbă la o umbră apăsată pentru o aparență încasată. În modul neumorfism, aceleași valori de distanță și suavitate a umbrelor conduc la o umbră clară și o umbră întunecată calculate din culoarea suprafeței dvs., ridicate sau apăsate în funcție de forma aleasă. Rotunjirea colțurilor și o variantă a modului întunecat se aplică ambelor stiluri.

Deoarece o suprafață mată sau ușor umbrită poate ateriza într-o tonalitate medie greu de citit cu text negru sau alb, unealta verifică contrastul rezultat și adaugă un comentariu scurt de avertizare deasupra CSS atunci când nicio culoare de text nu ar sta confortabil deasupra WCAG AA — o invitație să ajustați culoarea suprafeței sau opacitatea în loc să ghiciți.

Tot rulează local în browser atunci când mutați cursorii — fără instrument de design, fără cont și nimic trimis la un server. Copiați CSS direct în foaia de stil, descărcați ca fișier .txt, sau trimiteți rezultatul înapoi la intrare pentru a continua să o ajustați.

FAQ