Γεννήτρια διαβάθμισης CSS (Gradient)

Πώς να χρησιμοποιήσετε τη γεννήτρια διαβάθμισης CSS

1. Επιλέξτε έναν Τύπος διαβάθμισης: Γραμμική, Ακτινωτή ή Κωνική. Η μεγάλη προεπισκόπηση στην κορυφή ενημερώνεται με κάθε αλλαγή.
2. Για γραμμική διαβάθμιση, ορίστε τη Γωνία με τον ολισθητή ή πληκτρολογήστε την σε μοίρες (το 90° πηγαίνει από αριστερά προς τα δεξιά, το 180° από πάνω προς τα κάτω). Στην κωνική διαβάθμιση, η γωνία είναι το σημείο από το οποίο ξεκινά η σάρωση.
3. Για ακτινωτές και κωνικές διαβαθμίσεις, μετακινήστε το κέντρο με τα Κέντρο X και Κέντρο Y. Μια ακτινωτή διαβάθμιση μπορεί να είναι Κύκλος ή Έλλειψη (μενού Σχήμα).
4. Επεξεργαστείτε τα Σημεία χρώματος. Κάντε κλικ οπουδήποτε στη γραμμή για να προσθέσετε εκεί ένα σημείο με το χρώμα που έχει ήδη η διαβάθμιση σε αυτό το σημείο ή χρησιμοποιήστε το Προσθήκη σημείου για να γεμίσετε το μεγαλύτερο κενό. Σύρετε μια λαβή για να τη μετακινήσετε. Κάθε σημείο έχει και μια γραμμή όπου μπορείτε να διαλέξετε το χρώμα του, να πληκτρολογήσετε οποιοδήποτε χρώμα CSS, να ορίσετε τη Θέση (%) ή να το Αφαίρεση (μια διαβάθμιση κρατά τουλάχιστον δύο σημεία).
5. Προαιρετικά, επιλέξτε Επαναλαμβανόμενη, διαλέξτε την Παρεμβολή χρωμάτων, πατήστε Αντιστροφή για να αναποδογυρίσετε τα σημεία ή Τυχαία διαβάθμιση για έμπνευση.
6. Αντιγράψτε το αποτέλεσμα από τον Κώδικας CSS με το κουμπί Αντιγραφή.

Πληκτρολόγιο: επιλέξτε μια λαβή στη γραμμή και χρησιμοποιήστε τα βελάκια για να τη μετακινήσετε κατά 1% (10% με Shift), τα Home και End για να πάτε στα άκρα και το Delete για να την αφαιρέσετε.

Οι τρεις συναρτήσεις διαβάθμισης

• Η linear-gradient() αναμειγνύει χρώματα κατά μήκος μιας ευθείας. Η linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) πηγαίνει από ινδικό μπλε αριστερά σε ροζ δεξιά. Οι γωνίες μετρώνται δεξιόστροφα από την κορυφή: το 0deg δείχνει προς τα πάνω, το 90deg προς τα δεξιά.
• Η radial-gradient() ακτινοβολεί από ένα κεντρικό σημείο. Η radial-gradient(circle at 30% 40%, …) τοποθετεί το κέντρο στο 30% από τα αριστερά και στο 40% από την κορυφή. Η έλλειψη τεντώνεται μαζί με το πλαίσιο, ο κύκλος μένει κυκλικός.
• Η conic-gradient() σαρώνει γύρω από ένα κέντρο σαν τους δείκτες ρολογιού. Η conic-gradient(from 0deg at 50% 50%, …) φτιάχνει χρωματικούς τροχούς, γραφήματα πίτας και εφέ φόρτωσης. Οι θέσεις των σημείων είναι μερίδια ολόκληρης της περιστροφής.

Η επιλογή Επαναλαμβανόμενη χρησιμοποιεί τη repeating-linear-gradient() και τις αδελφές της: το μοτίβο που ορίζουν τα σημεία σας επαναλαμβάνεται μέχρι να γεμίσει το πλαίσιο. Βάλτε το τελευταίο σημείο αρκετά κάτω από το 100% (για παράδειγμα 20%) για να δείτε ρίγες ή δακτυλίους.

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

Παρεμβολή sRGB ή OKLCH

Από προεπιλογή, τα προγράμματα περιήγησης αναμειγνύουν τα χρώματα μιας διαβάθμισης σε sRGB. Ανάμεσα σε δύο κορεσμένα χρώματα, όπως το μπλε και το κίτρινο, αυτό συχνά δημιουργεί ένα θαμπό γκρι ή λασπώδες μέσο. Το CSS Color Level 4 σας επιτρέπει να επιλέξετε τον χώρο παρεμβολής: η linear-gradient(90deg in oklch, …) αναμειγνύει στον αντιληπτικό χώρο OKLCH και κρατά ζωντανό το μέσο.

Με την επιλογή OKLCH (πιο ομαλή, με εναλλακτική sRGB), το εργαλείο γράφει δύο δηλώσεις background: πρώτα την κλασική έκδοση sRGB και μετά την έκδοση OKLCH. Τα προγράμματα περιήγησης που υποστηρίζουν χώρους παρεμβολής (Chrome και Edge 111+, Safari 16.2+, Firefox 127+) χρησιμοποιούν τη δεύτερη γραμμή· τα παλαιότερα την αγνοούν και κρατούν την πρώτη.

Συμβουλές

• Στα πεδία των σημείων δέχονται χρώματα με διαφάνεια, για παράδειγμα #00000080 ή rgb(0 0 0 / 50%), κάτι βολικό για επικαλύψεις πάνω σε εικόνες.
• Ο κώδικας γράφεται με background. Χρησιμοποιήστε αντί γι’ αυτό το background-image αν ορίζετε χωριστά άλλες ιδιότητες φόντου.
• Οι διακριτικές διαβαθμίσεις (δύο κοντινές αποχρώσεις του ίδιου χρώματος) συνήθως φαίνονται πιο επαγγελματικές από τις πολύχρωμες.