CodeKitHubΤι είναι αυτό το εργαλείο;
Οι διαβαθμίσεις CSS είναι εικόνες που παράγονται από τον περιηγητή από μια λίστα χρωμάτων, αντί για αρχεία που ανεβάζετε — η linear-gradient() μεταβαίνει μεταξύ χρωμάτων κατά μήκος μιας ευθείας γραμμής σε δεδομένη γωνία, ενώ η radial-gradient() μεταβαίνει μεταξύ χρωμάτων προς τα έξω από ένα κεντρικό σημείο. Και οι δύο δέχονται δύο ή περισσότερα χρωματικά σημεία, καθένα προαιρετικά καρφιτσωμένο σε μια θέση κατά μήκος της διαβάθμισης.
Γραμμένες με το χέρι, οι διαβαθμίσεις είναι εύκολο να τις κάνετε λίγο λάθος: σειρά σημείων, ελλιπή ποσοστά, ή τιμή γωνίας στη λάθος κατεύθυνση (οι γωνίες CSS τρέχουν δεξιόστροφα από το 'to top', σε αντίθεση με τις μαθηματικές γωνίες). Αυτό το εργαλείο κρατά τη σύνταξη μακριά — ορίστε χρώματα και θέσεις με επιλογείς και ολισθητές, παρακολουθήστε το πλαίσιο προεπισκόπησης να ενημερώνεται σε πραγματικό χρόνο, και αντιγράψτε το τελικό CSS μόλις φαίνεται σωστό.
Πηγή: CSS Images Module Level 3, W3C — η προδιαγραφή που ορίζει τη σύνταξη linear-gradient() και radial-gradient().
Γιατί να το χρησιμοποιήσετε;
- Η ζωντανή προεπισκόπηση ενημερώνεται αμέσως σε κάθε αλλαγή χρώματος, θέσης και γωνίας — χωρίς ανάγκη επαναφόρτωσης σελίδας για να δείτε το αποτέλεσμα.
- Εναλλαγή μεταξύ γραμμικών και ακτινικών διαβαθμίσεων με ένα κλικ· το χειριστήριο γωνίας κρύβεται αυτόματα για ακτινικές διαβαθμίσεις, όπου δεν εφαρμόζεται.
- Προσθέστε ή αφαιρέστε χρωματικά σημεία (2 έως 4) αντί να περιορίζεστε σε σταθερή διαβάθμιση δύο χρωμάτων.
- Κάθε σημείο έχει τον δικό του ολισθητή θέσης, οπότε τα σημεία δεν χρειάζεται να είναι ομοιόμορφα κατανεμημένα.
- Παράγει CSS έτοιμο προς επικόλληση χρησιμοποιώντας την τυπική σύνταξη linear-gradient()/radial-gradient().
- Τρέχει εξ ολοκλήρου στον περιηγητή σας — τίποτα από όσα ρυθμίζετε δεν ανεβαίνει πουθενά. Δωρεάν, χωρίς εγγραφή, λειτουργεί σε κινητό.
Πώς χρησιμοποιείται
- Επιλέξτε Γραμμική ή Ακτινική ως τύπο διαβάθμισης.
- Για γραμμική διαβάθμιση, σύρετε τον ολισθητή γωνίας — 90deg πηγαίνει από αριστερά προς τα δεξιά, 180deg από πάνω προς τα κάτω, και ούτω καθεξής.
- Ορίστε το χρώμα και τη θέση για κάθε σημείο· το πρώτο σημείο είναι το αρχικό χρώμα της διαβάθμισης, το τελευταίο το τελικό.
- Κάντε κλικ στο '+ Add stop' για να προσθέσετε έως 4 συνολικά σημεία για διαβάθμιση πολλαπλών χρωμάτων, ή το κουμπί ✕ για να αφαιρέσετε ένα (ελάχιστο 2).
- Αντιγράψτε το παραγόμενο CSS και επικολλήστε το σε δήλωση background ή background-image.
Παράδειγμα
Είσοδος
Γραμμική · Γωνία: 90deg · Σημεία: #f97316 στο 0%, #ec4899 στο 100%Έξοδος
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);Μια διαβάθμιση πορτοκαλί-προς-ροζ από αριστερά προς τα δεξιά — συνηθισμένο στυλ για κουμπιά, banner και φόντα ήρωα.
Γραμμικές έναντι ακτινικών διαβαθμίσεων
Μια γραμμική διαβάθμιση μεταβαίνει χρώμα κατά μήκος ευθείας γραμμής, ελεγχόμενη από γωνία — χρήσιμη για banner, κουμπιά, και κατευθυντικά φόντα. Μια ακτινική διαβάθμιση μεταβαίνει χρώμα προς τα έξω από κεντρικό σημείο σε επεκτεινόμενους δακτυλίους, κάτι που ταιριάζει σε εφέ προβολέα, κονκάρδες, ή φόντα τύπου λάμψης. Αυτό το εργαλείο ορίζει ως προεπιλογή την ακτινική διαβάθμιση σε σχήμα κύκλου κεντραρισμένο στο πλαίσιο, που καλύπτει τη συνηθέστερη ακτινική χρήση· η CSS υποστηρίζει επίσης σχήματα έλλειψης και θέσεις εκτός κέντρου αν χρειαστεί να επεξεργαστείτε περαιτέρω το αποτέλεσμα με το χέρι.
Συνηθισμένα μοτίβα διαβάθμισης
- Διακριτική έμφαση επωνυμίας: δύο κοντινές αποχρώσεις (π.χ. δύο τόνοι του ίδιου χρώματος) σε ρηχή γωνία για ένα απαλό φόντο.
- Κουμπί CTA υψηλής αντίθεσης: δύο κορεσμένα, συμπληρωματικά χρώματα σε 90deg ή 135deg για μια τολμηρή, κλικαρίσιμη εμφάνιση.
- Επικάλυψη σε εικόνα: μια διαβάθμιση από διαφανές σε συμπαγές χρώμα (ρυθμίστε αδιαφάνεια μέσω χρώματος rgba στο υποκείμενο hex του επιλογέα, ή προσαρμόστε μετά την αντιγραφή) επιστρωμένη πάνω σε background-image.
- Πολυσημειακή διαβάθμιση ουράνιου τόξου/επωνυμίας: 3–4 σημεία κατανεμημένα σε ολόκληρο το εύρος 0–100% για πιο ομαλές, πιο σταδιακές μεταβάσεις από ό,τι επιτρέπει μια διαβάθμιση δύο χρωμάτων.
- Ακτινικός προβολέας: ένα φωτεινό κεντρικό σημείο κοντά στο 0% που σβήνει σε πιο σκούρο σημείο άκρης κοντά στο 100%, χρήσιμο για ενότητες ήρωα ή αναδείξεις καρτών.
Συνδυασμός με άλλα εργαλεία CSS
Οι διαβαθμίσεις συχνά συνδυάζονται με στρογγυλεμένες γωνίες και σκιές στο ίδιο στοιχείο — μια κάρτα διαβάθμισης με απαλή box-shadow και στρογγυλεμένες γωνίες είναι συνηθισμένο μοτίβο UI. Δημιουργήστε κάθε κομμάτι ξεχωριστά και συνδυάστε τις δηλώσεις CSS στο στοιχείο.
→ Δημιουργός Box Shadow · Δημιουργός Border Radius · Επιλογέας Χρώματος
Συχνές ερωτήσεις
Ποια είναι η διαφορά μεταξύ linear-gradient() και radial-gradient();
Η linear-gradient() μεταβαίνει χρώματα κατά μήκος ευθείας γραμμής σε καθορισμένη γωνία. Η radial-gradient() μεταβαίνει χρώματα προς τα έξω από κεντρικό σημείο σε επεκτεινόμενα σχήματα (κύκλο ή έλλειψη). Και οι δύο δέχονται το ίδιο είδος λίστας χρωματικών σημείων χωρισμένων με κόμμα· διαφέρει μόνο το σχήμα της μετάβασης.
Πώς λειτουργούν οι γωνίες διαβάθμισης CSS;
Οι γωνίες διαβάθμισης CSS τρέχουν δεξιόστροφα ξεκινώντας από το 'to top' (0deg δείχνοντας προς τα πάνω). Το 90deg δείχνει δεξιά, το 180deg δείχνει κάτω, και το 270deg δείχνει αριστερά — η αντίθετη σύμβαση από τις τυπικές μαθηματικές γωνίες, κάτι που είναι συνηθισμένη πηγή σύγχυσης όταν γράφετε διαβαθμίσεις με το χέρι.
Μπορώ να χρησιμοποιήσω περισσότερα από 4 χρωματικά σημεία;
Ναι — οι διαβαθμίσεις CSS δέχονται οποιονδήποτε αριθμό χρωματικών σημείων χωρισμένων με κόμμα. Αυτό το εργαλείο περιορίζει τον διαδραστικό δημιουργό σε 4 για διαχειρίσιμη διεπαφή, αλλά μπορείτε να αντιγράψετε το παραγόμενο CSS και να προσθέσετε χειροκίνητα περισσότερες καταχωρήσεις 'χρώμα θέση%' χωρισμένες με κόμμα στο φύλλο στυλ σας.
Γιατί η διαβάθμισή μου φαίνεται με λωρίδες αντί για ομαλή;
Οι λωρίδες συνήθως προέρχονται από χρώματα πολύ απομακρυσμένα σε απόχρωση με πολύ λίγα σημεία ανάμεσα, ή από την περιορισμένη ακρίβεια χρώματος του ίδιου του περιηγητή σε πολύ χαμηλή αντίθεση. Η προσθήκη ενδιάμεσου σημείου με αναμεμειγμένο χρώμα, ή η επιλογή χρωμάτων πιο κοντά σε απόχρωση, γενικά παράγει πιο ομαλό αποτέλεσμα.
Μπορώ να κάνω κινούμενη εικόνα μια διαβάθμιση CSS;
Όχι απευθείας — οι διαβαθμίσεις δεν είναι εγγενώς κινούμενες με τον τρόπο που είναι το background-position ή το transform, καθώς οι περιηγητές δεν μπορούν να παρεμβάλλουν μεταξύ δύο αυθαίρετων ορισμών διαβάθμισης. Συνηθισμένες λύσεις περιλαμβάνουν κινούμενη εικόνα του background-position σε μια υπερμεγέθη διαβάθμιση, ή μετάβαση του background-color αν αλλάζει μόνο ένα χρώμα.