Δημιουργήστε μοντέρνα εφέ UI παγωμένου γυαλιού. Προσαρμόστε τη θόλωση, τη διαφάνεια και τα περιγράμματα και, στη συνέχεια, αντιγράψτε το CSS απευθείας στο έργο σας. 100% δωρεάν. Δεν απαιτείται εγγραφή.
Το μοντέρνο εφέ θαμπού υάλου για σύγχρονο σχεδιασμό ιστοσελίδων.
Σχεδιασμένο εξ αρχής για αυστηρή ιδιωτικότητα, άμεση εκτέλεση και μηδενική τριβή. Χωρίς συνδρομές ή εγγραφές.
Ρυθμίστε το blur, την διαφάνεια και τον κορεσμό σε πραγματικό χρόνο πάνω από ένα ζωντανό φόντο για άμεση προεπισκόπηση.
Δημιουργεί αυτόματα κώδικα backdrop-filter με προθέματα webkit εξασφαλίζοντας συμβατότητα σε Safari, Chrome και Firefox.
Δημιουργήστε τυπικές κλάσεις CSS ή μετατρέψτε άμεσα το σχέδιό σας σε κλάσεις utility για το Tailwind CSS.
Η 100% εκτέλεση στην πλευρά του χρήστη σημαίνει ότι μπορείτε να σύρετε ρυθμιστικά και να βλέπετε τις αλλαγές CSS χωρίς lag.
Συγκρίνετε τη μηχανή WebAssembly τοπικής εκτέλεσης με παλαιότερα εργαλεία cloud.
| Χαρακτηριστικό | Utiliome (Τοπικός Browser) | Παλαιοί Μετατροπείς Cloud |
|---|---|---|
| Ζωντανή Προεπισκόπηση | Διαδραστικός καμβάς πραγματικού χρόνου | Γεννήτριες στατικού κώδικα |
| Έξοδος Κώδικα | Vanilla CSS & Κλάσεις Tailwind Utility | Μόνο CSS |
| Συμβατότητα | Προσθέτει αυτόματα -webkit-backdrop-filter | Απαιτεί χειροκίνητα προθέματα |
| Κόστος | Δωρεάν για πάντα χωρίς διαφημίσεις | Συνδρομές για premium layouts |
Δεν απαιτείται εγκατάσταση λογισμικού. Όλα εκτελούνται απευθείας μέσα στο πρόγραμμα περιήγησης.
Χρησιμοποιήστε το ρυθμιστικό θολώματος για να καθορίσετε πόσο έντονα θα θολώνουν τα στοιχεία φόντου πίσω από την κάρτα σας.
Τροποποιήστε το κανάλι alpha του χρώματος φόντου για μια διακριτική σκούρα απόχρωση ή μια φωτεινή λευκή γυάλινη όψη.
Κάντε κλικ στο κουμπί εξαγωγής για να αντιγράψετε το έτοιμο προς χρήση CSS snippet απευθείας στο πρόχειρο.
Γρήγορη Απάντηση: Το Glassmorphism είναι μια μοντέρνα τάση σχεδιασμού διεπαφών που χαρακτηρίζεται από ημιδιαφανή φόντα με έντονο θόλωμα (θαμπό γυαλί), διακριτικές σκιές και λεπτά περίγραμμα. Δημιουργεί αίσθηση βάθους.
Ξεκινώντας από το macOS Big Sur, το iOS και το Windows 11 Fluent Design, το Glassmorphism έχει γίνει το πρότυπο για μοντέρνες εφαρμογές web.
Η βασική φιλοσοφία βασίζεται στον "άξονα Z". Κάνοντας το πάνω στρώμα ημιδιαφανές και θολώνοντας τα έντονα στρώματα από κάτω, οι σχεδιαστές δημιουργούν οπτική ιεραρχία χωρίς σκληρές σκιές. Αυτό δίνει στον χρήστη την αίσθηση του τι συμβαίνει "πίσω" από το ενεργό παράθυρο.
Γρήγορη Απάντηση: Η ιδιότητα CSS backdrop-filter εφαρμόζει εφέ όπως θόλωμα ή αλλαγή χρώματος στην περιοχή ακριβώς πίσω από ένα στοιχείο. Σε αντίθεση με το απλό 'filter', το backdrop-filter επηρεάζει μόνο ό,τι είναι ορατό πίσω από το διαφανές φόντο.
Για να πετύχουν το εφέ Glassmorphism, οι προγραμματιστές βασίζονται στον κανόνα CSS backdrop-filter. Όταν ορίζετε ένα ημιδιαφανές χρώμα φόντου (π.χ. background: rgba(255, 255, 255, 0.2);) και εφαρμόζετε backdrop-filter: blur(10px);, η μηχανή του πλοηγού παίρνει τα pixels πίσω από το στοιχείο, τα θολώνει και τα σχεδιάζει μέσα στο στοιχείο.
Επειδή αυτό απαιτεί συνεχή επανυπολογισμό των pixels κατά την κύλιση, είναι μια ιδιότητα που χρησιμοποιεί επιτάχυνση υλικού (hardware acceleration). Ο generator του Utiliome υπολογίζει αυτές τις μετρήσεις σε πραγματικό χρόνο.
Γρήγορη Απάντηση: Το Tailwind CSS παρέχει ενσωματωμένες κλάσεις για εφέ γυαλιού. Συνδυάστε 'backdrop-blur-md', 'bg-white/30' και ένα λεπτό 'border-white/20' για να δημιουργήσετε το εφέ χωρίς να γράψετε προσαρμοσμένο CSS.
Αν και η συγγραφή προσαρμοσμένου CSS είναι εξαιρετική για μάθηση, οι σύγχρονοι προγραμματιστές συχνά προτιμούν frameworks όπως το Tailwind.
Για να φτιάξετε μια κάρτα γυαλιού στο Tailwind, χρειάζεστε τρία βασικά στρώματα:
backdrop-blur-md ή backdrop-blur-lg για να θολώσετε το φόντο.bg-white/20 (για light mode) ή bg-slate-900/40 (για dark mode) για να δώσετε υπόσταση στο γυαλί.border border-white/20.Ο generator του Utiliome παρέχει επιλογή για έξοδο σε τυπικό CSS ή σε έτοιμο string κλάσεων Tailwind.
Γρήγορη Απάντηση: Το Safari απαιτεί ιστορικά το πρόθεμα '-webkit-' για τα φίλτρα φόντου. Αν το παραλείψετε, το εφέ γυαλιού θα αποτύχει σε συσκευές iOS και macOS, εμφανίζοντας απλά ένα διαφανές πλαίσιο.
Ένα συχνό λάθος των νέων προγραμματιστών είναι η παράβλεψη των συσκευών Apple. Ενώ ο Chrome και ο Firefox υποστηρίζουν την ιδιότητα backdrop-filter εγγενώς, το Safari (ειδικά παλαιότερες εκδόσεις iOS) απαιτεί το πρόθεμα κατασκευαστή.
Αν δεν συμπεριλάβετε το -webkit-backdrop-filter: blur(10px);, οι χρήστες Apple θα βλέπουν απλώς ένα διαφανές div, κάνοντας το κείμενό σας εντελώς μη αναγνώσιμο πάνω από το φόντο.
Ο CSS generator του Utiliome εισάγει αυτόματα τα απαραίτητα προθέματα WebKit στον κώδικα εξόδου, εξασφαλίζοντας ομοιόμορφη εμφάνιση σε όλα τα λειτουργικά συστήματα.
Γρήγορη Απάντηση: Το Glassmorphism μπορεί να προκαλέσει προβλήματα προσβασιμότητας εάν το κείμενο πάνω από ένα θολό φόντο δεν πληροί τις αναλογίες αντίθεσης WCAG. Πρέπει να διασφαλίσετε επαρκή αντίθεση στο κείμενο.
Η πιο συχνή κριτική για το glassmorphism είναι η κακή προσβασιμότητα. Εάν μια έντονη εικόνα φόντου αλλάζει από σκούρο μπλε σε φωτεινό κίτρινο πίσω από την κάρτα σας, το λευκό κείμενο μπορεί να γίνει ξαφνικά αόρατο.
Για να το διορθώσετε, πρέπει να εφαρμόσετε μια ισχυρή απόχρωση φόντου (διαφάνεια). Για παράδειγμα, αν χρησιμοποιείτε λευκό κείμενο, βεβαιωθείτε ότι το φόντο του γυαλιού είναι rgba(0, 0, 0, 0.6). Αυτό εγγυάται ότι το κείμενο θα διατηρεί πάντα την ελάχιστη αναλογία αντίθεσης 4.5:1 που απαιτείται από το νόμο.
Γρήγορη Απάντηση: Ένας γυάλινος πίνακας χωρίς σκιά φαίνεται επίπεδος. Πρέπει να τον ανυψώσετε χρησιμοποιώντας μια διακριτική, ευρεία σκιά (π.χ. box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1)) για να τον διαχωρίσετε από το φόντο.
Ο ανθρώπινος εγκέφαλος χρειάζεται ενδείξεις φωτισμού για να αντιληφθεί το βάθος. Αν απλά θολώσετε το φόντο, το UI μπορεί να φαίνεται επίπεδο.
Για να κάνετε το γυαλί να ξεχωρίζει, πρέπει να το ανυψώσετε στον άξονα Z. Ο generator του Utiliome σας επιτρέπει να ρυθμίσετε ένα διακριτικό box-shadow. Διατηρώντας τη διαφάνεια της σκιάς χαμηλή (~10%) και την ακτίνα θολώματος υψηλή (32px), δημιουργείτε ένα απαλό εφέ που διαχωρίζει το γυαλί από το φόντο.
Όλα όσα πρέπει να γνωρίζετε για τη χρήση του δωρεάν online Γεννήτρια CSS Glassmorphism του Utiliome.
Το Safari απαιτεί το πρόθεμα '-webkit-backdrop-filter'. Το Utiliome το δημιουργεί αυτόματα στην εξαγωγή CSS για πλήρη συμβατότητα.
Ναι. Ο generator του Utiliome περιλαμβάνει επιλογή για άμεση μετατροπή του σχεδίου σε κλάσεις utility του Tailwind (π.χ. backdrop-blur-md bg-white/30).
Ναι, η υπερβολική χρήση έντονου blur σε μεγάλα στοιχεία μπορεί να προκαλέσει καθυστερήσεις σε αδύναμες κινητές συσκευές, καθώς αναγκάζει την GPU να επανυπολογίζει τα pixels κατά την κύλιση.
Το πραγματικό γυαλί αντανακλά το φως στις άκρες του. Προσθέστε ένα περίγραμμα 1px με πολύ χαμηλή διαφάνεια (όπως rgba(255, 255, 255, 0.2)) για να προσομοιώσετε αυτή την αντανάκλαση.
Ναι, 100% δωρεάν χωρίς περιορισμούς, διαφημίσεις ή απαιτήσεις εγγραφής.
Έχετε αίτημα λειτουργίας ή βρήκατε σφάλμα; Συνομιλήστε μαζί μας στο Discord.