Γεννήτρια διαβαθμίσεων CSS
Τι είναι μια διαβάθμιση CSS;
Οι διαβαθμίσεις CSS σας επιτρέπουν να εμφανίζετε ομαλές μεταβάσεις μεταξύ δύο ή περισσότερων χρωμάτων χωρίς αρχεία εικόνας. Διατίθενται σε τρεις τύπους: linear-gradient (κατά μήκος ευθείας γραμμής), radial-gradient (εκπεμπόμενο από κεντρικό σημείο) και conic-gradient (περιστρεφόμενο γύρω από κεντρικό σημείο). Χρησιμοποιούνται για φόντα, κουμπιά, επικαλύψεις και διακοσμητικά στοιχεία.
Πώς να χρησιμοποιήσετε τη γεννήτρια διαβαθμίσεων CSS
-
Επιλέξτε μια προεπιλογή από τα δείγματα ή διαμορφώστε τη δική σας διαβάθμιση.
-
Επιλέξτε τον τύπο διαβάθμισης: linear, radial ή conic.
-
Ρυθμίστε τη γωνία (για linear/conic) ή το σχήμα (για radial).
-
Επεξεργαστείτε τις στάσεις χρώματος — αλλάξτε χρώματα και θέσεις (0–100%).
-
Προσθέστε ή αφαιρέστε στάσεις χρώματος όπως χρειάζεται.
-
Αντιγράψτε το CSS και επικολλήστε το στο φύλλο στυλ σας.
Συχνές ερωτήσεις
Πώς δημιουργώ μια διαφανή κλίση; Χρησιμοποιήστε τιμές χρώματος rgba() ή hsla() με ένα κανάλι άλφα 0 για πλήρη διαφάνεια. Για παράδειγμα, ένα σημείο χρώματος rgba(0,0,0,0) είναι πλήρως διαφανές μαύρο, χρήσιμο για επικαλύψεις fade-out σε εικόνες.
Πώς δημιουργώ μια σταθερή στάση χρώματος (χωρίς μετάβαση); Τοποθετήστε δύο σημεία χρώματος στην ίδια θέση — ένα που τελειώνει και ένα που ξεκινά σε εκείνο το σημείο. Για παράδειγμα, red 50%, blue 50% δημιουργεί μια στιγμιαία εναλλαγή από κόκκινο σε μπλε στο μέσο χωρίς μετάβαση κλίσης.
Ποιά προγράμματα περιήγησης υποστηρίζουν κωνικές κλίσεις; Οι κωνικές κλίσεις υποστηρίζονται σε όλα τα σύγχρονα προγράμματα περιήγησης (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Δεν υποστηρίζονται στο Internet Explorer.
Μπορώ να χρησιμοποιήσω πολλαπλές κλίσεις στο ίδιο στοιχείο; Ναι. Το CSS background δέχεται μια λίστα στρωμάτων διαχωρισμένων με κόμμα. Μπορείτε να στοιβάσετε κλίσεις, να τις συνδυάσετε με εικόνες φόντου και να ελέγχετε ανεξάρτητα τη θέση και το μέγεθος κάθε στρώματος.
Keywords: γεννήτρια διαβάθμισης CSS, γραμμική διαβάθμιση, ακτινική διαβάθμιση, κωνική διαβάθμιση, γεννήτρια φόντου CSS, επιλογέας χρώματος διαβάθμισης, εργαλείο διαβάθμισης CSS