Γεννήτρια CSS Gradient
Δημιουργήστε όμορφες CSS διαβαθμίσεις οπτικά με ζωντανή προεπισκόπηση. Υποστήριξη για γραμμικές, ακτινωτές και κωνικές διαβαθμίσεις. Προσθέστε στάσεις χρώματος, ρυθμίστε γωνίες. Αντιγράψτε κώδικα CSS. Δωρεάν online εργαλείο.
Αναφορά
Τι είναι οι CSS διαβαθμίσεις;
Οι CSS διαβαθμίσεις σας επιτρέπουν να εμφανίζετε ομαλές μεταβάσεις μεταξύ δύο ή περισσότερων καθορισμένων χρωμάτων. Το CSS παρέχει τρεις τύπους διαβαθμίσεων: linear-gradient (πηγαίνει σε ευθεία γραμμή), radial-gradient (ακτινοβολεί από ένα κεντρικό σημείο) και conic-gradient (περιστρέφεται γύρω από ένα κεντρικό σημείο).
Τύποι διαβαθμίσεων
Οι γραμμικές διαβαθμίσεις μεταβαίνουν χρώματα κατά μήκος μιας ευθείας γραμμής που ορίζεται από μια γωνία. Οι ακτινωτές διαβαθμίσεις ακτινοβολούν προς τα έξω από ένα κεντρικό σημείο σε ελλειπτικό ή κυκλικό σχήμα. Οι κωνικές διαβαθμίσεις περιστρέφουν τις μεταβάσεις χρώματος γύρω από ένα κεντρικό σημείο, σαν τροχός χρωμάτων.
Στάσεις χρώματος
Οι στάσεις χρώματος ορίζουν τα χρώματα σε μια διαβάθμιση και τις θέσεις τους κατά μήκος της γραμμής διαβάθμισης. Μπορείτε να προσθέσετε πολλές στάσεις για να δημιουργήσετε πολύπλοκες πολυχρωματικές διαβαθμίσεις. Κάθε στάση έχει μια τιμή χρώματος και ένα προαιρετικό ποσοστό θέσης.
Απόρρητο
Όλη η δημιουργία διαβαθμίσεων εκτελείται 100% στον browser σας. Κανένα δεδομένο δεν αποστέλλεται σε κανέναν server.