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

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

Πώς λειτουργεί

Η έξοδος είναι μια τυπική δήλωση background CSS. Οι γραμμικές διαβαθμίσεις εκτείνονται κατά μήκος μιας γωνίας: 0deg πηγαίνει από κάτω προς τα πάνω, 90deg από αριστερά προς τα δεξιά, 180deg από πάνω προς τα κάτω. Οι ακτινικές διαβαθμίσεις απλώνονται από ένα κεντρικό σημείο ως κύκλος ή έλλειψη που ταιριάζει στο πλαίσιο. Οι κωνικές διαβαθμίσεις περιστρέφονται γύρω από ένα κεντρικό σημείο, ξεκινώντας από την επιλεγμένη γωνία, κάτι που είναι χρήσιμο για εφέ τύπου πίτας και τροχούς χρωμάτων.

Οι στάσεις γράφονται με σειρά θέσης, ώστε να μπορείτε να σύρετε τις θέσεις ελεύθερα. Μια στάση με μειωμένη αδιαφάνεια γράφεται ως rgba(), επιτρέποντας στο φόντο να φαίνεται από πίσω. Δύο στάσεις στην ίδια θέση δημιουργούν μια απότομη άκρη αντί για ανάμειξη, που είναι ο τρόπος με τον οποίο δημιουργούνται ρίγες.

Και οι τρεις συναρτήσεις διαβαθμίσεων λειτουργούν σε κάθε σύγχρονο πρόγραμμα περιήγησης. Οι διαβαθμίσεις αναμειγνύονται από προεπιλογή στον χρωματικό χώρο sRGB, ο οποίος μπορεί να φαίνεται ελαφρώς γκρι μεταξύ συμπληρωματικών χρωμάτων (για παράδειγμα μπλε και κίτρινο)· η προσθήκη μιας μεσαίας στάσης με πιο φωτεινό χρώμα το αποφεύγει.

Παραδείγματα

Διακριτικό φόντο κεφαλίδας

Το linear-gradient(180deg, #f5f7fa 0%, #c3cfe2 100%) δίνει μια απαλή μετάβαση από πάνω προς τα κάτω που κρατά το σκούρο κείμενο ευανάγνωστο.

Ρίγες με καθαρά όρια

Χρησιμοποιήστε τέσσερα σημεία διαβάθμισης: #0b5d1e 0%, #0b5d1e 50%, #f2c14e 50%, #f2c14e 100%. Τα δύο σημεία στο 50% συναντώνται χωρίς ανάμειξη, δίνοντας δύο συμπαγή μισά.

Εφέ προβολέα

Μια ακτινωτή διαβάθμιση (κύκλος επάνω αριστερά) από rgba(255, 255, 255, 0.6) σε rgba(255, 255, 255, 0) πάνω από ένα χρώμα δίνει ένα απαλό φως στη γωνία.

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

Προς ποια κατεύθυνση πηγαίνει η γωνία 0deg;

Στο CSS, οι 0deg δείχνουν προς τα πάνω, οπότε η διαβάθμιση ξεκινά από κάτω και τελειώνει επάνω. Οι 90deg πηγαίνουν από αριστερά προς τα δεξιά. Αυτό διαφέρει από ορισμένες εφαρμογές σχεδίασης, όπου οι 0° συνήθως σημαίνουν από αριστερά προς τα δεξιά.

Μπορώ να χρησιμοποιήσω τη διαβάθμιση σε κείμενο;

Ναι: εφαρμόστε το φόντο και προσθέστε background-clip: text και color: transparent. Βεβαιωθείτε ότι το κείμενο παραμένει ευανάγνωστο πάνω στη σελίδα σε κάθε σημείο της διαβάθμισης.

Χρειάζονται προθέματα κατασκευαστή όπως -webkit-linear-gradient;

Όχι. Τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν τη σύνταξη χωρίς προθέματα. Τα προθέματα χρειάζονται μόνο για προγράμματα περιήγησης που είναι πολλά χρόνια παλιά.

Απόρρητο

Όλα δημιουργούνται στο πρόγραμμα περιήγησής σας. Τα χρώματα και οι ρυθμίσεις σας δεν αποστέλλονται ούτε αποθηκεύονται.