CSS Glassmorphism генераторы

Бұл құрал жартылай мөлдір фонды backdrop-filter: blur() қасиетімен біріктіру арқылы CSS үлбіреген шыны (glassmorphism) эффектісін жасайды — сырғытпаларды түрлі-түсті алдын ала қарау терезесінің үстінде жылжытып, шыны карточканың артындағы нәрсені қалай бұлдырататынын көріңіз де, CSS кодын көшіріп алыңыз. Ол сондай-ақ Safari-ге қажет -webkit-backdrop-filter префиксін де шығарады, себебі backdrop-filter онда әлі осы префиксті талап етеді.

Бұл құрал не істейді?

Glassmorphism — элемент үлбіреген шыны сияқты көрінетін интерфейс стилі: жартылай мөлдір фон оның артындағы түстердің көрінуіне мүмкіндік береді, ал backdrop-filter: blur() сол фонды бұлдырлатып, оны жай ғана мөлдір панель емес, шыны ретінде қабылдатады. Жіңішке, жартылай мөлдір жиек пен дөңгеленген бұрыштар әдетте бұл көріністі аяқтайды.

Бұл құрал сізге осы эффектіні көрнекі түрде жасауға мүмкіндік береді. Алдын ала қарау терезесі қозғалмалы градиентті фонның үстінде арнайы орналастырылған, өйткені бұлдырлықтың көрінуі үшін осылай керек — glassmorphism тек артында түс немесе деталь бар нәрсенің үстінде ғана дұрыс көрінеді, тегіс ақ беттің үстінде емес. Фон түсінің мөлдірлігін, бұлдырлық күшін, жиек мөлдірлігін және бұрыш радиусын реттеп, содан кейін жасалған CSS кодын көшіріп алыңыз.

Дереккөз: Filter Effects Module Level 1, W3C — осы эффект негізделген backdrop-filter қасиетін анықтайды.

Оны неге пайдалану керек?

Түрлі-түсті анимацияланған фонның үстіндегі тікелей алдын ала қарау, сол арқылы бос фонда бұлдырлық мәндерін болжаудың орнына үлбіреген шыны эффектісін нақты көресіз.
Фон мөлдірлігін, backdrop бұлдырлық күшін, жиек мөлдірлігін және border-radius-ты бір жерден толық басқару.
backdrop-filter мен -webkit-backdrop-filter префиксін автоматты түрде шығарады, сондықтан Safari қолдауын ұмытпайсыз.
Толығымен браузеріңізде жұмыс істейді — сіз баптаған ешнәрсе ешжерге жүктелмейді.
Тегін, тіркеусіз, мобильді құрылғыларда да жұмыс істейді.

Оны қалай пайдалану керек

Фон түсін таңдап, оның мөлдірлігін реттеңіз — төмен мөлдірлік (10–25%) шыны сияқты қабылданады; жоғарырақ мөлдірлік қатты боялған панельге ұқсас көрінеді.
Элементтің артындағы нәрсені бұлдырлату үшін бұлдырлық күшін арттырыңыз — үлбіреген шыны көрінісін нақты жасайтын нәрсе осы, тек мөлдірліктің өзінен ерекшеленеді.
Жарық жиек қосу үшін жиек мөлдірлігін реттеңіз, бұл шыны карточканың фонмен қосылып кетпей, бөлек беткей ретінде қабылдануына көмектеседі.
Дөңгеленген бұрыштар үшін border-radius орнатыңыз — glassmorphism карточкалары әрдайым дерлік дөңгеленген, өткір бұрышты сирек болады.
Жасалған CSS кодын көшіріп, стиль кестеңізге қойыңыз. Элементтің артында түс немесе текстурасы бар нәрсе болу керектігін есте сақтаңыз — glassmorphism тегіс, бір түсті фонда көрінбейді.

Мысал

Енгізу

Фон: ақ, 20% мөлдірлікпен · Бұлдырлық: 10px · Жиек мөлдірлігі: 30% · Радиус: 16px

Нәтиже

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

Кіру панельдерінде, навигация жолақтарында және түрлі-түсті немесе фотосуретті фондағы дашборд виджеттерінде қолданылатын классикалық үлбіреген шыны карточка стилі.

Safari және браузер қолдауы

backdrop-filter Chrome, Firefox, Edge және Safari-дің қазіргі нұсқаларында қолдау табады, бірақ тарихи тұрғыда Safari бұлдырлықты көрсету үшін префикссіз қасиетпен қатар -webkit-backdrop-filter префиксін талап еткен — онсыз Safari-дің ескі нұсқалары бұлдырлықты байқаусыз елемей, тек тегіс мөлдір фонды ғана көрсетеді. Сол себепті бұл құрал әрдайым екі декларацияны да шығарады.

Ағымдағы браузер үйлесімділігі бойынша толық ақпарат алу үшін MDN-нің backdrop-filter құжаттамасын қараңыз: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

Glassmorphism-ге неге артында бір нәрсе керек

backdrop-filter тек элементтің артында визуалды түрде тұрған нәрсені ғана бұлдырлатады — фон суретін, градиентті, басқа боялған элементті немесе астында жылжитын мазмұнды. Жай ақ немесе бір түсті фонда бұлдырлататын ешнәрсе жоқ, сондықтан эффект көрінбейді және элемент жай ғана сәл боялған, дөңгеленген қорап сияқты көрінеді. Эффект дұрыс көрінуі үшін glassmorphism элементтерін әрдайым градиенттің, фотосуреттің немесе басқа да бай детальді фонның үстіне орналастырыңыз.

Басқа CSS эффектілерімен үйлестіру

Glassmorphism карточкалары көбінесе қосымша тереңдік үшін астыңғы жағында жұмсақ box-shadow-мен біріктіріледі. Мұнда үлбіреген шыны CSS кодын жасаңыз, содан кейін Box Shadow генераторымен жұмсақ көлеңке қосып, екі декларацияны да бір элементке қолданыңыз.

→ Box Shadow генераторы · Border Radius генераторы

Жиі қойылатын сұрақтар

Неге менің бетімде шыны эффектісі көрінбейді?

backdrop-filter элементтің артындағы нәрсені бұлдырлатады. Егер сіздің элементіңіз жай ақ немесе бір түсті фонда тұрса, онда визуалды түрде бұлдырлататын қызықты ешнәрсе жоқ, сондықтан ол жай ғана сәл боялған қорапшаға ұқсайды. Үлбіреген шыны эффектісі көрінуі үшін оны градиент, сурет немесе басқа да детальді фонның үстіне орналастырыңыз.

Маған -webkit-backdrop-filter префиксі керек пе?

Иә, эффект Safari-де сенімді түрде көрінуін қаласаңыз. Бұл құрал әрдайым стандартты backdrop-filter мен -webkit- префиксі бар нұсқасын бірге шығарады, себебі Safari тарихи тұрғыда бұлдырлықты қолдану үшін префиксті қажет еткен.

Фон мөлдірлігі мен бұлдырлықтың айырмашылығы неде?

Фон мөлдірлігі сіз таңдаған бояу түсінің қаншалықты көрінетінін және оның артындағы нәрсенің қаншалықты өзгеріссіз көрінетінін басқарады. Бұлдырлық сол көрінетін фонның қаншалықты жағылған/жұмсартылғанын басқарады. Glassmorphism екеуін де бірге қолданады — тек біреуін емес, біраз мөлдірлікпен қатар біраз бұлдырлықты да.

backdrop-filter-ді кез келген элементте қолдана аламын ба?

Иә, бірақ ол тек беттің рендерингінде сол элементтің артында визуалды тұрған нәрсеге ғана әсер етеді, элементтің өз ұрпақтарына емес. Оны көптеген элементтерге қолданғанда немесе жиі анимациялағанда кейбір құрылғыларда өнімділікке де әсер етеді, сондықтан оны ондаған кішкентай элементтердің орнына карточкалар, модалды терезелер немесе навигация жолақтары сияқты бірнеше көрнекті интерфейс беткейлеріне қолданған дұрыс.

Неге менің жиегім әрең көрінеді?

Бұл құралдағы жиек жартылай мөлдір ақ түсті пайдаланады, ол әдейі нәзік болуға арналған — шыны панельдің қатты, мөлдір емес контур сияқты көрінбей, бөлек беткей ретінде қабылдануына көмектесетін жарық жиек. Жиекті айқынырақ көргіңіз келсе, жиек мөлдірлігі сырғытпасын көтеріңіз.