Γεννήτρια Διαβαθμίσεων CSS
Προσθέστε χρώματα, επιλέξτε γραμμική ή ακτινική, και αντιγράψτε τον έτοιμο κώδικα CSS. Η προεπισκόπηση ενημερώνεται καθώς πληκτρολογείτε — τίποτα από αυτά δεν φεύγει ποτέ από το πρόγραμμα περιήγησής σας.
Σχεδιάστε τη διαβάθμιση, πάρτε πραγματικό CSS
Κάθε χρώμα έχει μια θέση — από 0% έως 100% κατά μήκος της διαβάθμισης. Αυτό το εργαλείο
ταξινομεί πάντα τα χρώματα κατά θέση όταν δημιουργεί το CSS
(ανεξάρτητα από τη σειρά με την οποία τα προσθέσατε), οπότε αυτό
που βλέπετε στην προεπισκόπηση ταιριάζει πάντα με αυτό που
αντιγράφετε. Εναλλάξτε τη Γραμμική σε
οποιαδήποτε γωνία από 0° έως 360°, ή περάστε σε Ακτινική για μια διαβάθμιση που επεκτείνεται
προς τα έξω από το κέντρο αντί κατά μήκος μιας γραμμής.
Πρακτικό παράδειγμα
Δύο χρώματα — #667eea στο 0% και #764ba2 στο 100% — με γραμμικό τύπο
στις 135deg παράγει:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Επικολλήστε το απευθείας σε οποιοδήποτε αρχείο CSS ή χαρακτηριστικό style. Προσθέστε ένα τρίτο χρώμα στο 50% και το CSS — μαζί με την προεπισκόπηση —
ενημερώνονται αυτόματα σε ανάμειξη τριών χρωμάτων.
Συχνές ερωτήσεις
Ποια είναι η διαφορά ανάμεσα σε γραμμική και ακτινική διαβάθμιση;
Η γραμμική διαβάθμιση μεταβαίνει κατά μήκος μιας ευθείας γραμμής, στη γωνία που επιλέγετε — σαν ένα ηλιοβασίλεμα που περνά από πορτοκαλί σε μοβ στον ουρανό. Η ακτινική επεκτείνεται προς τα έξω σε κύκλους από ένα κεντρικό σημείο αντί για γραμμή, όπως ένας προβολέας ή μια λάμψη. Και οι δύο χρησιμοποιούν τα ίδια χρώματα· αλλάζει μόνο το σχήμα της μετάβασης.
Πώς λειτουργεί η γωνία σε μια γραμμική διαβάθμιση;
Στο CSS, η γωνία 0deg δείχνει προς την κορυφή του πλαισίου και αυξάνεται δεξιόστροφα — άρα η 90deg δείχνει δεξιά, η 180deg κάτω και η 270deg αριστερά. Μπερδεύει πολύ κόσμο επειδή η 0deg δεν είναι 'από αριστερά προς τα δεξιά' όπως θα περίμενε κανείς, αλλά 'προς τα πάνω'. Ο ρυθμιστής γωνίας εδώ ενημερώνει την προεπισκόπηση ακαριαία, ώστε να μη χρειάζεται να το θυμάστε.
Γιατί έχει σημασία η θέση κάθε χρώματος;
Η θέση (0–100%) δείχνει το σημείο κατά μήκος της γραμμής ή της ακτίνας όπου το χρώμα φτάνει στην πλήρη ένταση — το CSS αναμιγνύει ομαλά τα χρώματα που βρίσκονται εκατέρωθεν. Αν φέρετε δύο χρώματα πολύ κοντά (π.χ. 40% και 45%) δημιουργείται μια απότομη ζώνη χρώματος αντί για ομαλή μετάβαση, κάτι που είναι έγκυρο σχεδιαστικό τέχνασμα και όχι λάθος, αν αυτό είναι το αποτέλεσμα που θέλετε.
Χρειάζονται προθέματα προγράμματος περιήγησης για να λειτουργήσει αυτό το CSS;
Όχι — οι συναρτήσεις linear-gradient() και radial-gradient() υποστηρίζονται χωρίς προθέματα εδώ και χρόνια σε κάθε σύγχρονο πρόγραμμα περιήγησης. Το CSS που παράγει αυτό το εργαλείο είναι έτοιμο για αντιγραφή-επικόλληση, χωρίς να χρειάζεται -webkit- ή -moz-.