Γεννήτρια CSS Glassmorphism

Αυτό το εργαλείο χτίζει ένα εφέ CSS θαμπού γυαλιού (glassmorphism) συνδυάζοντας ένα ημιδιαφανές φόντο με backdrop-filter: blur() — σύρετε τους ολισθητές πάνω από την πολύχρωμη προεπισκόπηση για να δείτε την κάρτα γυαλιού να θολώνει ό,τι βρίσκεται από πίσω, μετά αντιγράψτε το CSS. Παράγει επίσης το πρόθεμα -webkit-backdrop-filter που χρειάζεται το Safari, καθώς το backdrop-filter εξακολουθεί να το απαιτεί εκεί.

Τι είναι αυτό το εργαλείο;

Το Glassmorphism είναι ένα στυλ UI όπου ένα στοιχείο φαίνεται σαν θαμπό γυαλί: ένα ημιδιαφανές φόντο αφήνει τα χρώματα από πίσω να φαίνονται, ενώ το 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;

Ένα κλασικό στυλ κάρτας θαμπού γυαλιού που χρησιμοποιείται σε πάνελ σύνδεσης, γραμμές πλοήγησης και widgets πίνακα ελέγχου πάνω σε πολύχρωμο φόντο ή φόντο φωτογραφίας.

Υποστήριξη Safari και περιηγητών

Το backdrop-filter υποστηρίζεται σε τρέχοντα Chrome, Firefox, Edge και Safari, αλλά το Safari ιστορικά έχει απαιτήσει το πρόθεμα -webkit-backdrop-filter μαζί με την ιδιότητα χωρίς πρόθεμα για να αποδώσει τη θόλωση — χωρίς αυτό, παλαιότερες εκδόσεις Safari αγνοούν σιωπηλά τη θόλωση και δείχνουν μόνο το επίπεδο διαφανές φόντο. Αυτό το εργαλείο παράγει πάντα και τις δύο δηλώσεις για αυτόν τον λόγο.

Δείτε την τεκμηρίωση backdrop-filter του MDN για τρέχουσες λεπτομέρειες συμβατότητας περιηγητών: 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 σε οποιοδήποτε στοιχείο;

Ναι, αλλά επηρεάζει μόνο ό,τι βρίσκεται οπτικά πίσω από αυτό το στοιχείο μέσα στην απόδοση της σελίδας, όχι τα δικά του παιδιά του στοιχείου. Έχει επίσης κόστος απόδοσης σε ορισμένες συσκευές όταν εφαρμόζεται σε πολλά στοιχεία ή γίνεται συχνά κινούμενη εικόνα, οπότε είναι καλύτερο να χρησιμοποιείται για μικρό αριθμό εμφανών επιφανειών UI όπως κάρτες, modal ή γραμμές πλοήγησης παρά για δεκάδες μικρά στοιχεία.

Γιατί το περίγραμμά μου μόλις που φαίνεται;

Το περίγραμμα σε αυτό το εργαλείο χρησιμοποιεί ημιδιαφανές λευκό, που προορίζεται να είναι διακριτικό — μια ελαφριά άκρη που βοηθά το πάνελ γυαλιού να διαβάζεται ως ξεχωριστή επιφάνεια χωρίς να φαίνεται σαν σκληρό, αδιαφανές περίγραμμα. Αυξήστε τον ολισθητή αδιαφάνειας περιγράμματος αν θέλετε πιο ορατή άκρη.