Η σύνταξη ενός gradient με το χέρι είναι δύσκολη υπόθεση: η γωνία, η σειρά των σημείων και οι θέσεις σε ποσοστά αλληλεπιδρούν, και ένα απλό τυπογραφικό λάθος χαλάει σιωπηλά ολόκληρο το background. Αυτός ο generator κρατάει την προεπισκόπηση και τον κώδικα απόλυτα συγχρονισμένα - ό,τι βλέπεις είναι ακριβώς, χαρακτήρα προς χαρακτήρα, το CSS που αντιγράφεις. Τρέχει εξ ολοκλήρου στο πρόγραμμα περιήγησης, οπότε τίποτα από όσα σχεδιάζεις δεν ανεβαίνει πουθενά.
Δωρεάν CSS Gradient Generator
Λειτουργεί εξ ολοκλήρου στον browser σας - χωρίς μεταφόρτωση, χωρίς εγγραφή.
Τύπος
Χρωματικά σημεία
Κώδικας CSS
Τι είναι ένας CSS gradient generator;
Ένας CSS gradient generator είναι ένα οπτικό εργαλείο που γράφει για σένα τον κώδικα linear-gradient(), radial-gradient() ή conic-gradient(). Διαλέγεις χρώματα, σέρνεις τα σημεία διαβάθμισης, ορίζεις τη γωνία, και ο έτοιμος κώδικας CSS εμφανίζεται αμέσως, ενώ η ζωντανή προεπισκόπηση δείχνει ακριβώς τι θα εμφανίσει το πρόγραμμα περιήγησης. Όλα τρέχουν μέσα στο πρόγραμμα περιήγησής σου.
Πώς λειτουργεί
- 1Διάλεξε τύπο gradient. Επίλεξε linear, radial ή conic. Το linear εμφανίζει ρυθμιστικό γωνίας· το radial προσθέτει σχήμα (κύκλος ή έλλειψη) και θέση· το conic έχει γωνία εκκίνησης και θέση.
- 2Όρισε τα χρωματικά σημεία. Κάνε κλικ σε κάθε δείγμα για να διαλέξεις χρώμα και σύρε το ρυθμιστικό του για να μετακινήσεις το σημείο κατά μήκος του gradient. Πρόσθεσε έως 8 σημεία ή αφαίρεσέ τα μέχρι 2.
- 3Προσάρμοσε την κατεύθυνση. Σύρε το ρυθμιστικό γωνίας (0-360 μοίρες) ή διάλεξε μια λέξη-κλειδί θέσης. Η προεπισκόπηση ενημερώνεται ζωντανά σε κάθε αλλαγή.
- 4Αντέγραψε τον κώδικα CSS. Πάτησε Copy για να πάρεις τη δήλωση background, μαζί με μια εναλλακτική γραμμή συμπαγούς χρώματος, και επικόλλησέ την στο stylesheet σου.
Σε ποιους απευθύνεται
- Front-end προγραμματιστές που χρειάζονται φόντο για hero, κάρτα ή κουμπί και θέλουν την ακριβή γραμμή
linear-gradient()χωρίς να απομνημονεύσουν τη σύνταξη. - Σχεδιαστές web και UI που αναπαράγουν ένα mockup: ξαναφτιάχνουν το gradient οπτικά και μετά δίνουν τον κώδικα CSS απευθείας στην ομάδα ανάπτυξης.
- Όσοι φτιάχνουν email και landing pages και χρειάζονται μια εναλλακτική γραμμή με συμπαγές χρώμα ώστε το σχέδιο να υποβαθμίζεται ομαλά σε παλιά προγράμματα - το αποτέλεσμα την περιλαμβάνει αυτόματα.
- Φοιτητές που μαθαίνουν CSS και θέλουν να δουν σε πραγματικό χρόνο πώς η γωνία, τα χρωματικά σημεία και ο τύπος του gradient αλλάζουν το τελικό αποτέλεσμα.
Συχνές ερωτήσεις
Είναι δωρεάν αυτός ο CSS gradient generator;
Ναι - 100% δωρεάν, χωρίς εγγραφή, χωρίς υδατογράφημα, χωρίς όρια. Φτιάξε όσα gradients θέλεις και αντέγραψε τον κώδικα CSS απευθείας στο project σου.
Ανεβαίνει κάτι σε κάποιον διακομιστή;
Όχι. Το gradient δημιουργείται και προβάλλεται εξ ολοκλήρου στο πρόγραμμα περιήγησής σου με απλή JavaScript. Κανένα χρώμα, κώδικας ή δεδομένα χρήσης δεν στέλνονται πουθενά.
Ποια είναι η διαφορά ανάμεσα σε linear, radial και conic gradient;
Ένα linear gradient αναμειγνύει χρώματα κατά μήκος μιας ευθείας γραμμής, στη γωνία που επιλέγεις. Ένα radial gradient ακτινοβολεί προς τα έξω από ένα κεντρικό σημείο σε σχήμα κύκλου ή έλλειψης. Ένα conic gradient σαρώνει τα χρώματα γύρω από ένα κεντρικό σημείο, σαν τροχό χρωμάτων ή γράφημα πίτας.
Πώς λειτουργούν τα χρωματικά σημεία στα CSS gradients;
Κάθε σημείο συνδυάζει ένα χρώμα με μια θέση από 0% έως 100% κατά μήκος της γραμμής gradient. Το πρόγραμμα περιήγησης αναμειγνύει ομαλά τα γειτονικά σημεία. Αν τοποθετήσεις δύο σημεία στην ίδια θέση, δημιουργείται ένα απότομο όριο αντί για ανάμειξη - χρήσιμο για ρίγες ή εφέ τύπου πίτας.
Ποια προγράμματα περιήγησης υποστηρίζουν αυτά τα gradients;
Όλα τα σύγχρονα προγράμματα περιήγησης - Chrome, Firefox, Safari και Edge - υποστηρίζουν linear-gradient() και radial-gradient() χωρίς πρόθεμα· το conic-gradient() υποστηρίζεται παντού από το 2020. Ο κώδικας που αντιγράφεις περιλαμβάνει και εναλλακτική λύση με συμπαγές χρώμα για ό,τι είναι παλιότερο.
Μπορώ να χρησιμοποιήσω το gradient ως χρώμα κειμένου;
Όχι απευθείας - τα gradients είναι εικόνες, όχι χρώματα. Εφάρμοσε το gradient ως background-image στο στοιχείο κειμένου, και μετά πρόσθεσε background-clip: text και color: transparent ώστε το gradient να φαίνεται μέσα από τα γράμματα.
Γιατί το gradient μου εμφανίζει λωρίδες (banding);
Οι λωρίδες εμφανίζονται όταν δύο απομακρυσμένα σημεία αναμειγνύονται σε μεγάλη απόσταση με παρόμοιες αποχρώσεις, αποκαλύπτοντας τα βήματα χρώματος των 8 bit. Μείωσέ το προσθέτοντας ένα ενδιάμεσο χρωματικό σημείο, μικραίνοντας την απόσταση ανάμειξης ή διαλέγοντας χρώματα που διαφέρουν τόσο σε φωτεινότητα όσο και σε απόχρωση.