Γεννήτρια διαβάθμισης CSS: Γραμμική, ακτινική και κωνική

Δωρεάν, χωρίς εγγραφή, λειτουργεί στο πρόγραμμα περιήγησής σου. Φτιάξε γραμμική, ακτινική ή κωνική διαβάθμιση με 2 έως 8 χρώματα και αντίγραψε τον κώδικα CSS. Κατέβασέ την και ως PNG σε HD ή 4K.

Τύπος

ΓραμμικήΑκτινικήΚωνική

Κατεύθυνση 135°

Σημεία χρώματος

0%
100%

CSS

background: #ff7ac6;
background: linear-gradient(135deg, #ff7ac6 0%, #ffe14d 100%);

Μέγεθος εικόνας

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

Ξεκίνα από ένα έτοιμο σχέδιο

Φτιαγμένο στη συσκευή σου.

Γιατί να χρησιμοποιήσεις το Γεννήτρια διαβάθμισης CSS

100% δωρεάν: Χρησιμοποίησέ το όσο συχνά θες. Χωρίς εγγραφή, χωρίς υδατογράφημα, χωρίς εγκατάσταση.
Ιδιωτικό από τη σχεδίασή του: Ό,τι γράφεις μένει στο πρόγραμμα περιήγησής σου και δεν μας στέλνεται ποτέ.
Λειτουργεί σε κάθε συσκευή: Τρέχει στο πρόγραμμα περιήγησης σε Windows, Mac, Linux, Android και iPhone. Δεν χρειάζεται εφαρμογή.

Πώς χρησιμοποιείς το Γεννήτρια διαβάθμισης CSS

Διάλεξε τον Τύπο: Γραμμική, Ακτινική ή Κωνική. Όρισε την κατεύθυνση με το ρυθμιστικό, ή διάλεξε Κύκλος ή Έλλειψη για ακτινική διαβάθμιση.
Στα «Σημεία χρώματος», διάλεξε κάθε χρώμα ή γράψε κωδικό, και σύρε το ρυθμιστικό του για να ορίσεις τη θέση του. Πρόσθεσε σημείο με «Πρόσθεσε σημείο», για έως 8 χρώματα, και «Αντιστροφή» για να αντιστρέψεις τη σειρά.
Ή πάτα μια από τις έτοιμες ρυθμίσεις στο «Ξεκίνα από προκαθορισμένο» και άλλαξέ την από εκεί.
Πάτα «Αντίγραψε CSS» και επικόλλησέ το στο φύλλο στυλ σου, ή διάλεξε «Μέγεθος εικόνας» και πάτα «Λήψη PNG».

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

Πώς χρησιμοποιώ το CSS;

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

Ποια είναι η διαφορά γραμμικής, ακτινικής και κωνικής;

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

Πώς αλλάζω την κατεύθυνση μιας γραμμικής διαβάθμισης;

Σύρε το ρυθμιστικό Κατεύθυνση από 0° έως 360°. Το 0° πάει από κάτω προς τα πάνω, το 90° από αριστερά προς τα δεξιά, το 180° από πάνω προς τα κάτω, και το 135° διαγώνια προς κάτω δεξιά.

Πόσα χρώματα μπορεί να έχει μια διαβάθμιση;

Από 2 έως 8 σημεία χρώματος. Κάθε σημείο έχει θέση από 0% έως 100%· βάλε δύο σημεία στην ίδια θέση για σκληρή γραμμή ανάμεσα στα χρώματα αντί για μίξη.

Μπορώ να χρησιμοποιήσω διαφάνεια;

Ναι. Γράψε χρώμα όπως rgba(47, 91, 255, 0.5) ή κωδικό HEX 8 ψηφίων σε ένα σημείο, και η διαβάθμιση ξεθωριάζει μέχρι να φαίνεται διαφανής εκεί.

Μπορώ να κατεβάσω τη διαβάθμιση ως εικόνα;

Ναι. Διάλεξε 1920 × 1080, 3840 × 2160, 1080 × 1080, 1080 × 1920 ή 1500 × 500 και πάτα «Λήψη PNG», για ταπετσαρία, παρουσίαση, ανάρτηση ή επικεφαλίδα.

Λειτουργεί το CSS με Tailwind, React ή WordPress;

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

Μεταφορτώνεται κάτι;

Όχι. Οι διαβαθμίσεις φτιάχνονται στη συσκευή σου.

Είναι το Γεννήτρια διαβάθμισης CSS δωρεάν;

Ναι. Είναι δωρεάν στη χρήση, χωρίς εγγραφή και χωρίς εγκατάσταση.