Δημιουργήστε κάρτες UI από παγωμένο γυαλί με θόλωση φόντου, διαφάνεια και περιγράμματα, και αντιγράψτε το CSS.

Προεπισκόπηση

Γυάλινη κάρτα

Παγωμένο γυαλί που επιπλέει πάνω από ζωντανό φόντο.

Φόντο
Έξοδος CSS

Παράγει τόσο το backdrop-filter όσο και το -webkit-backdrop-filter. Σημείωση: το backdrop-filter δεν υποστηρίζεται σε παλαιότερα προγράμματα περιήγησης (π.χ. Firefox κάτω από 103)· προσθέστε ένα συμπαγές εναλλακτικό φόντο για αυτά.

px
%
px
Γέμισμα γυαλιού
20%
Περίγραμμα
30%
Προεπιλογές ποιότητας

Σχετικά με το Γεννήτρια Glassmorphism

Ο Glassmorphism Generator δημιουργεί το εφέ κάρτας θαμπού γυαλιού: ένα ημιδιαφανές πάνελ που θολώνει ό,τι βρίσκεται από πίσω του. Οι ρυθμιστές ελέγχουν τη θόλωση και τον κορεσμό του backdrop-filter, το χρώμα και τη διαφάνεια της απόχρωσης γυαλιού, το χρώμα και την αδιαφάνεια του περιγράμματος, την ακτίνα γωνιών και μια εξωτερική σκιά — κάθε αλλαγή αποδίδεται ζωντανά πάνω σε ένα έντονο φόντο ώστε να κρίνετε ρεαλιστικά το εφέ.

Τέσσερα προκαθορισμένα πρότυπα ποιότητας — subtle, frosted, vivid και dark glass — σας δίνουν δοκιμασμένους συνδυασμούς για αφετηρία. Το πρότυπο dark δείχνει πώς η ίδια συνταγή προσαρμόζεται σε σκούρες διεπαφές, όπου ένα αχνό ανοιχτόχρωμο περίγραμμα κάνει το μεγαλύτερο μέρος της δουλειάς διαχωρισμού του γυαλιού από το φόντο.

Το παραγόμενο CSS περιλαμβάνει τόσο το backdrop-filter όσο και το πρόθεμα -webkit-backdrop-filter που απαιτεί το Safari. Σημειώστε την επιφύλαξη συμβατότητας: παλαιότεροι browsers (για παράδειγμα το Firefox πριν την έκδοση 103) δεν υποστηρίζουν το backdrop-filter, γι' αυτό παρέχετε ένα συμπαγές εναλλακτικό φόντο για αυτούς.

Πώς να χρησιμοποιήσετε το Γεννήτρια Glassmorphism

  1. Ξεκινήστε από ένα προκαθορισμένο πρότυπο — subtle, frosted, vivid ή dark glass — ή από τις προεπιλογές.
  2. Προσαρμόστε τη θόλωση και τον κορεσμό του backdrop filter.
  3. Ορίστε το χρώμα απόχρωσης γυαλιού και τη διαφάνειά του.
  4. Ρυθμίστε το χρώμα περιγράμματος, την αδιαφάνεια περιγράμματος, την ακτίνα γωνιών και τη σκιά περιγράμματος.
  5. Αντιγράψτε το CSS — περιλαμβάνει ήδη την ιδιότητα με πρόθεμα -webkit- για το Safari.

Συχνές ερωτήσεις

Το πάνελ αποκτά ένα ημιδιαφανές χρώμα φόντου, και το backdrop-filter: blur() θολώνει ό,τι αποδίδεται πίσω του. Μια αύξηση κορεσμού διατηρεί ζωντανά τα θολωμένα χρώματα, και ένα αχνό ημιαδιαφανές περίγραμμα τονίζει την άκρη του γυαλιού.

Το backdrop-filter χρειάζεται ημιδιαφανές φόντο στο στοιχείο και υποστήριξη από τον browser — το Firefox το ενεργοποίησε μόλις στην έκδοση 103. Το Safari χρειάζεται το πρόθεμα -webkit-backdrop-filter, το οποίο περιλαμβάνεται ήδη στο παραγόμενο CSS. Ορίζετε πάντα ένα συμπαγές εναλλακτικό φόντο.

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

Είναι ένα από τα πιο δαπανηρά εφέ CSS, καθώς ο browser θολώνει εκ νέου το φόντο καθώς το περιεχόμενο κινείται. Χρησιμοποιήστε το σε λίγες βασικές επιφάνειες αντί για δεκάδες στοιβαγμένες κάρτες, και δοκιμάστε την κύλιση σε κινητές συσκευές μεσαίας κατηγορίας.

Ναι, εντελώς δωρεάν και βασισμένος στον browser — ρυθμίστε τους ρυθμιστές και αντιγράψτε το CSS χωρίς λογαριασμό και χωρίς μεταφόρτωση.

Κοινοποίηση

Δημοφιλείς αναζητήσεις
γεννήτρια glassmorphism css γεννήτρια css glassmorphism εφέ παγωμένου γυαλιού css backdrop-filter blur css γεννήτρια γυάλινης κάρτας css δημιουργός εφέ γυαλιού css γεννήτρια φόντου glassmorphism γεννήτρια θολής κάρτας css
Χρειάζεστε βοήθεια;
Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.
Αναφορά προβλήματος

Προσθέστε αυτό το δωρεάν εργαλείο στον δικό σας ιστότοπο — αντιγράψτε και επικολλήστε τον παρακάτω κώδικα.