Γεννήτρια Glassmorphism
Ρυθμίστε μια κάρτα με εφέ παγωμένου γυαλιού — θόλωμα, απόχρωση, ανάδειξη περιγράμματος, ακτίνα γωνιών και σκιά — με προεπισκόπηση πάνω από ένα πραγματικά κινούμενο φόντο, ώστε η ποιότητα του θολώματος να είναι ορατή εν κινήσει.
🔒 Επεξεργάζεται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας — τίποτα που εισάγετε εδώ δεν μεταφορτώνεται ποτέ.
Αποτέλεσμα
Το backdrop-filter: blur() είναι η ιδιότητα CSS πίσω από την εμφάνιση παγωμένου γυαλιού — ένα ημιδιαφανές πάνελ που θολώνει ό,τι κινείται πίσω του αντί απλώς να ξεθωριάζει ένα επίπεδο χρώμα. Το πρόβλημα είναι ότι η ποιότητα του θολώματος είναι σχεδόν αδύνατο να κριθεί πάνω σε ένα στατικό δείγμα· γίνεται πειστικό μόνο όταν κάτι κινείται πραγματικά από κάτω, όπως ακριβώς θα συμβαίνει σε μια πραγματική σελίδα με περιεχόμενο, βίντεο ή ένα κινούμενο hero. Αυτή η γεννήτρια τοποθετεί την κάρτα προεπισκόπησης πάνω από ένα πραγματικά κινούμενο φόντο αντί για ένα στατικό, ώστε αυτό που βλέπετε ενώ μετακινείτε τους ρυθμιστές να είναι αυτό που θα βιώσουν πραγματικά οι επισκέπτες.
Το φόντο είναι μια πραγματική κινούμενη εικόνα CSS: ένα μεγάλο linear-gradient στο 400% του μεγέθους του στοιχείου, με @keyframes να μετατοπίζουν το background-position μπρος-πίσω σε βρόχο — χωρίς βρόχο κινούμενης εικόνας JavaScript, χωρίς canvas, απλώς η ίδια τεχνική συνεχούς background-position που χρησιμοποιείται σε hero sections παραγωγής. Το θόλωμα, το χρώμα και η αδιαφάνεια της απόχρωσης, το χρώμα/η αδιαφάνεια/το πάχος της ανάδειξης περιγράμματος, η ακτίνα γωνιών και η απαλότητα της σκιάς οδηγούν όλα τα ζωντανά στυλ της αιωρούμενης κάρτας και το αντιγράψιμο πλαίσιο CSS αντικατοπτρίζει ακριβώς τις ίδιες τιμές.
Δεν υποστηρίζουν όλοι οι browsers το backdrop-filter, επομένως η γεννήτρια παράγει επίσης ένα πραγματικό μπλοκ @supports not (backdrop-filter: blur(1px)) — όχι μια τυπική προσθήκη, αλλά έναν κανόνα fallback με το δικό του χρώμα φόντου υπολογισμένο από την πραγματική αδιαφάνεια της απόχρωσής σας. Επειδή η ημιδιαφάνεια χωρίς θόλωμα φαίνεται αισθητά χειρότερη (ό,τι βρίσκεται από πίσω διακρίνεται χωρίς θόλωμα), το fallback αυξάνει αυτόματα το κανάλι άλφα πάνω από την επιλεγμένη αδιαφάνεια της απόχρωσης και ένα σχόλιο στο παραγόμενο CSS εξηγεί ακριβώς γιατί και κατά πόσο.
Όλα υπολογίζονται και αποδίδονται στον δικό σας browser: χωρίς μεταφόρτωση, χωρίς λογαριασμό, χωρίς επικοινωνία με server. Αντιγράψτε το CSS μόλις η κάρτα φαίνεται σωστή, εφαρμόστε το σε οποιοδήποτε στοιχείο θέλετε να βρίσκεται πάνω από μια φωτογραφία, βίντεο ή ντεγκραντέ και κρατήστε το μπλοκ @supports ώστε οι παλαιότεροι browsers να εξακολουθούν να λαμβάνουν μια ευανάγνωστη, πιο αδιαφανή κάρτα αντί για μια ελάχιστα ορατή.