Γεννήτρια Κλίσης CSS

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

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

Χαρακτηριστικά

Ταυτόχρονη ενημέρωση προεπισκόπησης και κώδικα

Το CSS και η εμφάνιση αλλάζουν ταυτόχρονα καθώς τροποποιείτε χρώματα και γωνία

Υποστήριξη γραμμικής, ακτινωτής και κωνικής κλίσης

Καθορίστε λεπτομερώς γωνία, σχήμα και κεντρική θέση για κάθε τύπο

Προσαρμογή έως 10 χρωμάτων με σύρσιμο

Προσαρμόστε τη θέση χρώματος σύροντας στη γραμμή και τη διαφάνεια με ολίσθηση

8 δείγματα και τυχαία δημιουργία

Ξεκινήστε με τυπικές ή τυχαίες παλέτες και κάντε λεπτές προσαρμογές

Τρόπος χρήσης

Επιλέξτε τύπο

Επιλέξτε τον τύπο κλίσης: γραμμική, ακτινωτή ή κωνική

Καθορίστε χρώματα

Επιλέξτε χρώματα από κώδικα ή δείγματα, προσθέστε χρώματα με "Προσθήκη χρώματος" και προσαρμόστε θέση και διαφάνεια

Προσαρμόστε κατεύθυνση

Για γραμμική κλίση, ορίστε γωνία ή κατεύθυνση. Για ακτινωτή και κωνική, ορίστε κεντρική θέση

Αντιγράψτε κώδικα

Κάντε κλικ στο κουμπί "Αντιγραφή" για να επικολλώσετε το CSS μονής σειράς στο δικό σας στυλ

Περιπτώσεις χρήσης

Δημιουργία φόντου εικόνας hero

Καθορίστε χρώμα φόντου στο κορυφαίο τμήμα ή στα κουμπιά χωρίς κώδικα

Επιλογή χρώματος κεφαλίδας ιστολογίου

Επιλέξτε κοντινή παλέτα από δείγματα και προσαρμόστε το φόντο κεφαλίδας άρθρου

Επικάλυψη για επικάλυψη φωτογραφίας

Δημιουργήστε ημιδιαφανές στρώμα με χαμηλή διαφάνεια χρώματος πάνω από φωτογραφία

Προσαρμογή κλίσης πολλών χρωμάτων

Σύρετε τη θέση ορίου 3+ χρωμάτων για ίχνη λεπτών προσαρμογών

Βασικές γνώσεις

Διαφορές linear, radial και conic

Το CSS έχει 3 συναρτήσεις κλίσης με διαφορετικούς τρόπους αλλαγής χρώματος, όλες γράφονται στην ιδιότητα background.

linear-gradient：Η linear-gradient δημιουργεί γραμμική κλίση όπου το χρώμα αλλάζει κατά μήκος ευθείας γραμμής σε καθορισμένη γωνία.
radial-gradient：Η radial-gradient δημιουργεί ακτινωτή κλίση όπου το χρώμα εκτείνεται σε κύκλο ή έλλειψη από το κέντρο προς τα έξω.
conic-gradient：Η conic-gradient δημιουργεί κωνική κλίση όπου το χρώμα αλλάζει καθώς περιστρέφεται γύρω από το κέντρο δεξιόστροφα.

Αντιστοίχιση γωνίας και λέξεων κατεύθυνσης

Στη linear-gradient, 0deg δείχνει προς τα πάνω και αυξάνεται δεξιόστροφα. Οι γωνίες μπορούν επίσης να γραφούν ως λέξεις κατεύθυνσης όπως "to right" (90deg) ή "to bottom" (180deg).

Τρόπος γραφής σημείων χρώματος και διαφάνειας

Τα σημεία χρώματος (color stops) καθορίζουν τη θέση κάθε χρώματος στην κλίση, όπου 0% είναι η αρχή και 100% το τέλος. Για παράδειγμα, "#3B82F6 0%, #8B5CF6 100%" αλλάζει από μπλε σε ιώδες.

Μορφή #RRGGBB：Η μορφή #RRGGBB εκφράζει το χρώμα χρησιμοποιώντας δύο δεκαεξαδικά ψηφία για κάθε κανάλι (κόκκινο, πράσινο, μπλε), όπου #FF0000 είναι ματ κόκκινο.
Μορφή rgba：Η μορφή rgba προσθέτει διαφάνεια (0–1) στις τιμές RGB (0–255), όπου 0.5 αντιπροσωπεύει 50% διαφάνεια.