Σχεδιάστε ένα φόντο διαβάθμισης hero για μια landing page σε δευτερόλεπτα.
Δημιουργήστε μια διαβάθμιση κουμπιού που ταιριάζει με τα δύο κύρια χρώματα έμφασης της επωνυμίας σας.
Δημιουργήστε ένα φόντο placeholder για μια κάρτα ενώ περιμένετε το πραγματικό artwork.
Δοκιμάστε ένα φόντο σελίδας και προσαρμόστε τις στάσεις ζωντανά πριν δεσμευτείτε σε CSS.
Αντιγράψτε ένα string CSS gradient απευθείας σε μια βάση κώδικα Tailwind ή CSS-in-JS.
Σχετικά με Γεννήτρια CSS gradient
Η Γεννήτρια CSS Gradient δημιουργεί όμορφες γραμμικές και ακτινικές διαβαθμίσεις με ζωντανή προεπισκόπηση. Παράγει έτοιμο κώδικα CSS. Δωρεάν, εκτελείται στον περιηγητή σας.
Συχνές ερωτήσεις
Πώς δημιουργώ μια CSS διαβάθμιση;
Επιλέξτε τον τύπο διαβάθμισης, τα χρώματα μέσω των χρωματοεπιλογέων, ρυθμίστε την κατεύθυνση ή γωνία, και δείτε το αποτέλεσμα σε πραγματικό χρόνο. Όταν είστε ικανοποιημένοι, αντιγράψτε τον παραγόμενο κώδικα CSS και επικολλήστε τον στο stylesheet σας.
Αποθηκεύονται ή μεταδίδονται δεδομένα;
Όχι. Η διαβάθμιση δημιουργείται εξ ολοκλήρου στον περιηγητή σας. Κανένα χρώμα, προτίμηση ή κώδικας CSS δεν αποστέλλεται σε κανέναν διακομιστή. Όλα παραμένουν στη συσκευή σας μέχρι να αντιγράψετε τον παραγόμενο κώδικα.
Μπορώ να δημιουργήσω διαβαθμίσεις με περισσότερα από δύο χρώματα;
Ναι, μπορείτε να προσθέσετε πολλαπλά σημεία χρώματος για πολύπλοκες διαβαθμίσεις πολλών χρωμάτων. Μπορείτε επίσης να ρυθμίσετε τη θέση κάθε σημείου χρώματος και τη γωνία ή κατεύθυνση της διαβάθμισης για να πετύχετε ακριβώς το οπτικό εφέ που θέλετε.
Γιατί οι ακτινικές διαβαθμίσεις είναι πάντα κυκλικές και κεντραρισμένες;
Η τρέχουσα προεπισκόπηση εκπέμπει radial-gradient(circle, …) χωρίς ρητό σχήμα ή θέση. Το CSS υποστηρίζει έλλειψη και προσαρμοσμένες συντεταγμένες κέντρου (radial-gradient(ellipse at 30% 70%, …)) αλλά ο καμβάς προεπισκόπησης θα χρειαζόταν επιπλέον στοιχεία ελέγχου για να παραμείνει ευανάγνωστος. Μπορείτε να επικολλήσετε το παραγόμενο string και να επεξεργαστείτε χειροκίνητα το πρόθεμα για προηγμένες περιπτώσεις.
Μπορώ να εξάγω τη διαβάθμιση ως εικόνα PNG αντί για CSS;
Όχι άμεσα — το εργαλείο εξάγει strings CSS, που είναι αυτό που χρειάζεστε για το web. Για ένα στατικό PNG, επικολλήστε το CSS σε ένα div 1920×1080 στα DevTools του browser, στιγμιοτυπώστε το ή χρησιμοποιήστε ένα γρήγορο HTML αρχείο με την ίδια διαβάθμιση και αποτυπώστε το. Η εξαγωγή PNG είναι στον οδικό χάρτη.