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

Προεπισκόπηση
Έξοδος CSS
background: ;

Όλα εκτελούνται στο πρόγραμμα περιήγησής σας — χωρίς μεταφόρτωση, χωρίς εγγραφή.

Τύπος διαβάθμισης
deg
Στάσεις χρώματος Κάντε κλικ στη μπάρα για να προσθέσετε στάση, σύρετε για να μετακινήσετε
Επιλεγμένη στάση
Χρώμα στάσης
100%
%
Προεπιλογές

Σχετικά με το Γεννήτρια CSS Gradient

Ο CSS Gradient Generator δημιουργεί γραμμικές, ακτινωτές και κωνικές διαβαθμίσεις με πλήρη οπτικό έλεγχο. Προσθέστε χρωματικά σημεία κάνοντας κλικ στη μπάρα διαβάθμισης, σύρετέ τα για επανατοποθέτηση, και δώστε σε κάθε σημείο το δικό του χρώμα, διαφάνεια και θέση. Οι γραμμικές διαβαθμίσεις αποκτούν έλεγχο γωνίας· οι ακτινωτές ένα σχήμα (κύκλος ή έλλειψη) και θέση· οι κωνικές μια αρχική γωνία.

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

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

Πώς να χρησιμοποιήσετε το Γεννήτρια CSS Gradient

  1. Επιλέξτε τον τύπο διαβάθμισης: linear, radial ή conic.
  2. Ορίστε τη γωνία (linear), το σχήμα και τη θέση (radial), ή την αρχική γωνία (conic).
  3. Κάντε κλικ στη μπάρα διαβάθμισης για να προσθέσετε χρωματικά σημεία και σύρετέ τα στη θέση τους.
  4. Δώστε σε κάθε σημείο το χρώμα, τη διαφάνεια και την ακριβή θέση του.
  5. Δοκιμάστε τα προκαθορισμένα πρότυπα ή το κουμπί τυχαιοποίησης για γρήγορη έμπνευση.
  6. Αντιγράψτε την τιμή διαβάθμισης ή τον πλήρη κανόνα CSS.

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

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

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

Ναι — κάθε σημείο έχει το δικό του έλεγχο διαφάνειας. Ένα σημείο στο 0% διαφάνειας σβήνει τη διαβάθμιση, ο συνήθης τρόπος για να αναμείξετε μια χρωματισμένη επικάλυψη πάνω σε μια φωτογραφία ή να σβήσετε μια ενότητα ήρωα στο φόντο της σελίδας.

Όχι απευθείας — οι browsers δεν μπορούν να κάνουν μετάβαση μεταξύ τιμών διαβάθμισης. Τα συνήθη κόλπα: κάντε κινούμενο το background-position πάνω σε μια υπερμεγέθη διαβάθμιση, περιστρέψτε μια κωνική διαβάθμιση με μια προσαρμοσμένη ιδιότητα, ή κάντε cross-fade δύο στοιβαγμένα στοιχεία.

Ναι, δωρεάν και απεριόριστος. Εκτελείται εντελώς στον browser σας, οπότε τίποτα από όσα σχεδιάζετε δεν αποθηκεύεται ή μεταδίδεται.

Κοινοποίηση

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

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