Γεννήτρια CSS gradient
Σχεδιάστε διαβαθμίσεις φόντου CSS χωρίς να απομνημονεύσετε τη σύνταξη. Εναλλαγή μεταξύ γραμμικών και ακτινικών τύπων, ορίστε μια γωνία για γραμμικές διαβαθμίσεις (μοίρες) και επιλέξτε δύο χρωματικές στάσεις στο 0% και το 100%. Η προεπισκόπηση ενημερώνεται αμέσως. αντιγράψτε την πλήρη δήλωση φόντου ή εικόνας φόντου στο φύλλο στυλ σας. Υποστηρίζει εισαγωγή χρώματος HEX με επικύρωση.
Γωνία (°)
Χρώμα 1
Χρώμα 2
CSS
background: linear-gradient(135deg, #6f9b96 0%, #e8c4b8 100%);
Πώς να δημιουργήσετε μια διαβάθμιση
1. Επιλέξτε γραμμική ή ακτινική διαβάθμιση.
2. Για γραμμικό, ορίστε τη γωνία σε μοίρες (0 = από κάτω προς τα πάνω, 90 = από αριστερά προς τα δεξιά).
3. Εισαγάγετε χρώματα έναρξης και λήξης (HEX).
4. Αντιγράψτε το CSS από την κάρτα αποτελεσμάτων στο έργο σας.
Παραδείγματα διαβάθμισης
Γραμμικό banner ήρωα (135 μοίρες)
Κάλκινο #6F9B96 έως ροδάκινο #E8C4B8 στις 135° — μια διαγώνιος κοινή στις κεφαλίδες σελίδας προορισμού. Χρήση ως φόντο σε μια ενότητα πλήρους πλάτους.
Ακτινωτός προβολέας
Ακτινικός τύπος με ανοιχτό κέντρο και σκούρο άκρο — προσομοιώνει ένα χρονογράφημα: radial-gradient (κύκλος, #fff 0%, #333 100%).
Κατακόρυφη εξασθένιση (180 μοίρες)
Η γωνία 180 για από πάνω προς τα κάτω ξεθωριάζει από το χρώμα της επωνυμίας σε λευκό — χρήσιμο πίσω από τις ράβδους πλοήγησης.
Πότε να χρησιμοποιήσετε αυτό το εργαλείο
• Όταν φτιάχνετε πρωτότυπα φόντου διεπαφής χρήστη και θέλετε άμεσο οπτικό feedback.
• Όταν ξεχνάτε αν το αριστερό πάνω αριστερά γωνία ή το κάτω αριστερά.
• Όταν χρειάζεστε αντιγραφή-επικόλληση CSS για CodePen, αυθαίρετες τιμές Tailwind ή μεταβίβαση σχεδίου.
Πότε να επιλέξετε κάτι άλλο
• Όταν χρειάζεστε περισσότερες από δύο στάσεις χρώματος — επεκτείνετε το αντιγραμμένο CSS με μη αυτόματο τρόπο ή χρησιμοποιήστε μια εφαρμογή σχεδίασης.
• Όταν θέλετε κωνικές (sweep) διαβαθμίσεις — δεν υποστηρίζονται εδώ.
• Όταν χρειάζεστε παραλλαγές αυτόματης σκοτεινής λειτουργίας — αντιγράψτε και προσαρμόστε τα χρώματα ξεχωριστά.
Το χρώμα σταματά στις λεπτομέρειες
Ένα στοπ είναι χρώμα συν προαιρετική θέση: #ff0000 0ff 0%, #0ff% #000 Το πρόγραμμα περιήγησης παρεμβάλλει το RGB μεταξύ των στάσεων. Οι μεσαίες στάσεις δημιουργούν ηλιοβασιλέματα με ταινίες ή ρίγες πολλαπλών επωνυμιών. Ξεκινήστε με δύο στάσεις εδώ και, στη συνέχεια, επικολλήστε και προσαρτήστε μια τρίτη στάση στα devtools μέχρι να φαίνεται σωστή.
Γωνίες γραμμικής κλίσης
Το CSS μετρά τις γωνίες δεξιόστροφα από "επάνω" (0 μοίρες). Αυτό διαφέρει από το μάθημα των μαθηματικών όπου οι γωνίες ξεκινούν συχνά από τα δεξιά. Εάν μια κλίση φαίνεται να έχει περιστραφεί λάθος, προσθέστε ή αφαιρέστε 90 μοίρες. Χρησιμοποιήστε εργαλεία προγραμματισμού ζωντανής επεξεργασίας παράλληλα με αυτήν τη γεννήτρια για λεπτή ρύθμιση.
Απόδοση και εναλλακτικές
Οι διαβαθμίσεις είναι φιλικές προς τη GPU στα σύγχρονα προγράμματα περιήγησης. Για πολύ παλιούς πελάτες, ορίστε ένα σταθερό εναλλακτικό χρώμα φόντου στο πιο ανοιχτό χρώμα στοπ πριν από τη γραμμή ντεγκραντέ.
Συχνές ερωτήσεις
Ποια είναι η σύνταξη CSS για μια γραμμική διαβάθμιση;
φόντο: linear-gradient(γωνία, χρώμα1 0%, χρώμα2 100%); Η γωνία είναι σε μοίρες. Τα χρώματα είναι στάσεις κατά μήκος της γραμμής.
Πώς λειτουργούν οι στάσεις χρώματος;
Οι στάσεις επισημαίνουν τη θέση κάθε χρώματος στη γραμμή διαβάθμισης. 0% είναι η αρχή, 100% το τέλος. Αυτό το εργαλείο διορθώνει δύο στάσεις. προσθέστε περισσότερα στον επεξεργαστή σας εάν χρειάζεται.
Γραμμική έναντι ακτινωτής;
Γραμμικά μείγματα κατά μήκος μιας ευθείας γραμμής. Το Radial αναμειγνύεται προς τα έξω από ένα κεντρικό σημείο — καλό για κύκλους και μαλακά σημεία.
Ποιες τιμές γωνίας είναι κοινές;
0 μοίρες προς τα πάνω, 90 μοίρες προς τα δεξιά, 180 μοίρες προς τα κάτω, 135 μοίρες διαγώνιος — συνηθισμένο για κάρτες και ήρωες.
Ορίζει φόντο ή φόντο-εικόνα;
Η έξοδος χρησιμοποιεί τη συντομογραφία φόντου που είναι κατάλληλη για τα περισσότερα div. μπορείτε να χωρίσετε σε εικόνα φόντου εάν παρακάμψετε άλλα επίπεδα.
Τα χρώματα αποστέλλονται σε server;
Όχι. Η προεπισκόπηση αποδίδει τοπικά.
Είναι δωρεάν;
Ναι. Χρησιμοποιήστε το χωρίς λογαριασμό και χωρίς όριο.