Dizajn / CSS

Glassmorphism CSS generator (efekat zamagljenog stakla)

Kreirajte izgled zamagljenog stakla pomoću CSS svojstva backdrop-filter: podesite zamućenje, nijansu, neprozirnost, zasićenje, ivicu i poluprečnik uglova preko šarenog pregleda, a zatim kopirajte CSS koji radi u svim aktuelnim pregledačima.

Glassmorphism CSS generator (efekat zamagljenog stakla): backdrop-filter: blur() zamagljuje sve što se nalazi iza elementa, a saturate() čini te boje intenzivnijim. Poluprovidna pozadina daje staklu nijansu, dok blaga svetla ivica naglašava njegovu ivicu, kao kod pravog stakla. Red sa prefiksom -webkit- obezbeđuje podršku za Safari pre verzije 18. Radi 100% lokalno u vašem pregledaču, bez otpremanja datoteka na server.

Kategorija
Alatke za programere
Pokretanja
U vašem pregledaču
Trošak
Besplatno · bez registracije
Dostupnost
Spremno za upotrebu
Generator efekta staklaLokalna obrada

U potpunosti radi u vašem pregledaču

Matirano stakloBoje iza ove kartice su zamućene.

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

Za ovaj efekat je potrebno nešto šareno iza elementa: backdrop-filter zamućuje ono što se nalazi ispod, a poluprovidna pozadina omogućava da se to vidi. Red sa -webkit- namenjen je pregledaču Safari pre verzije 18. Proverite da li tekst na staklu ima dovoljan kontrast u odnosu na svaki deo pozadine.

Pristupačnost

Neki korisnici uključuju smanjenu providnost u sistemskim podešavanjima. Media upit prefers-reduced-transparency, koji podržavaju pregledači zasnovani na Chromiumu, može da zameni staklo neprozirnom pozadinom.

Kombinovanje sa senkom

Meka, široka senka odvaja karticu od pozadine; podesite je pomoću generatora box-shadow senke i zamenite red box-shadow.

Kako se koristi

  1. Podesite zamućenje, neprozirnost i zasićenje.
  2. Izaberite nijansu, ivicu i poluprečnik uglova.
  3. Kopirajte CSS i postavite element preko šarene pozadine.

Privatnost i ograničenja

Sve se izvršava u vašem pregledaču.

Srodne alatke

Senka okviraCSS gradijentCSS šablon

Često postavljana pitanja

Zašto moje staklo izgleda jednolično?

Iza njega mora da se nalazi nešto šareno ili detaljno; preko jednobojne pozadine nema ničega što bi zamućenje moglo da zamagli.

Da li je backdrop-filter spor?

Zahteva više resursa od većine CSS svojstava, naročito kada se velike površine pomeraju preko sadržaja koji se menja; zadržite zamućene površine malim i izbegavajte njihovo višestruko slaganje.

Da li je tekst čitljiv?

Proverite ga: kontrast se menja u zavisnosti od pozadine. Tamnija nijansa, veća neprozirnost ili senka teksta mogu da pomognu.

Besplatan alat · pokretanja: u vašem pregledaču · nalog nije potreban