Δημιουργήστε γραμμικές, ακτινωτές και κωνικές CSS διαβαθμίσεις από μηδέν με draggable έλεγχο πολλαπλών σημείων και επιμελημένα presets. Αντιγράψτε έτοιμο CSS άμεσα.

Ζωντανή προεπισκόπηση
Presets
Τύπος διαβάθμισης
Γωνία
°
Σημεία χρώματος
Σύρτε μια λαβή για μετακίνηση σημείου ή κάντε κλικ στη γραμμή για προσθήκη. Επιλέξτε σημείο για επεξεργασία του χρώματός του.
Επιλεγμένο σημείο
%
CSS
background: ;

Όλα υπολογίζονται ζωντανά στο πρόγραμμα περιήγησης — χωρίς εγγραφή, εντελώς δωρεάν.


Σχετικά με το Δημιουργός Διαβάθμισης

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

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

Όλα υπολογίζονται ζωντανά στο πρόγραμμα περιήγησής σας χωρίς κόστος. Αντιγράψτε τον πλήρη κανόνα CSS ή μόνο την τιμή background και επικολλήστε τον σε ένα φύλλο στυλ, ένα στυλ κουμπιού ή μια ενότητα hero — ένας απλός δημιουργός διαβάθμισης CSS για φόντα, επικαλύψεις και στοιχεία τονισμού διεπαφής.

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

  1. Επιλέξτε έναν τύπο διαβάθμισης: γραμμικό, ακτινικό ή κωνικό.
  2. Ξεκινήστε από ένα προκαθορισμένο σχέδιο ή κάντε κλικ στο «Random» για άμεσο σημείο εκκίνησης.
  3. Σύρετε τις λαβές σημείων για να τοποθετήσετε χρώματα, κάντε κλικ στη μπάρα για να προσθέσετε σημεία, και επεξεργαστείτε το χρώμα κάθε σημείου.
  4. Ρυθμίστε τη γωνία, ή χρησιμοποιήστε «Reverse» και «Rotate 45°» για να αναπροσανατολίσετε το μείγμα.
  5. Αντιγράψτε τον κανόνα CSS ή την τιμή background και επικολλήστε τον στο έργο σας.

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

Ναι. Το εργαλείο είναι πλήρως στην πλευρά του πελάτη — χωρίς εγγραφή, πιστώσεις ή όρια στον αριθμό διαβαθμίσεων που δημιουργείτε ή αντιγράφετε.

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

Μια διαβάθμιση χρειάζεται τουλάχιστον δύο σημεία, και μπορείτε να συνεχίσετε να κάνετε κλικ στη μπάρα για να προσθέσετε περισσότερα. Κάθε σημείο έχει το δικό του χρώμα και μετακινούμενη θέση, οπότε πολύπλοκα πολύχρωμα μείγματα είναι εύκολο να χτιστούν.

Οι γραμμικές και ακτινικές διαβαθμίσεις υποστηρίζονται παντού. Οι κωνικές διαβαθμίσεις υποστηρίζονται σε όλα τα σύγχρονα προγράμματα περιήγησης αλλά όχι σε πολύ παλιά, οπότε παρέχετε ένα εναλλακτικό background-color αν χρειάζεστε υποστήριξη παλαιότερων εκδόσεων.

Ναι — χρησιμοποιήστε το συμπληρωματικό εργαλείο Δημιουργός Διαβάθμισης από Εικόνα, το οποίο εξάγει τα κυρίαρχα χρώματα μιας ανεβασμένης εικόνας και τα μετατρέπει σε επεξεργάσιμα σημεία διαβάθμισης. Αυτό το εργαλείο είναι το αντίστοιχο από το μηδέν.

Κοινοποίηση

Δημοφιλείς αναζητήσεις
γεννήτρια διαβάθμισης δημιουργός css διαβάθμισης γεννήτρια γραμμικής διαβάθμισης δημιουργός ακτινικής διαβάθμισης κωνική διαβάθμιση css δωρεάν γεννήτρια διαβάθμισης
Χρειάζεστε βοήθεια;
Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.
Αναφορά προβλήματος

Προσθέστε αυτό το δωρεάν εργαλείο στον δικό σας ιστότοπο — αντιγράψτε και επικολλήστε τον παρακάτω κώδικα.