Γεννήτρια CSS Gradient
Δημιουργήστε εντυπωσιακά CSS gradient οπτικά. Δημιουργήστε γραμμικά, ακτινικά και κωνικά gradient με πολλαπλές στάσεις χρώματος, γωνίες και θέσεις. Αντιγράψτε κώδικα CSS έτοιμο για παραγωγή αμέσως.
Τι είναι ένα CSS gradient;
Ένα CSS gradient είναι μια τιμή εικόνας CSS που εμφανίζει ομαλές μεταβάσεις μεταξύ δύο ή περισσότερων χρωμάτων χωρίς αρχεία εικόνας. Τα gradient αποδίδονται από το πρόγραμμα περιήγησης, καθιστώντας τα ανεξάρτητα από την ανάλυση και υψηλής απόδοσης.
Ποιοι τύποι CSS gradient υποστηρίζονται;
Αυτή η γεννήτρια υποστηρίζει τρεις τύπους: linear-gradient (χρώματα κατά μήκος ευθείας), radial-gradient (χρώματα που ακτινοβολούν από το κέντρο) και conic-gradient (χρώματα που περιστρέφονται γύρω από ένα κεντρικό σημείο).
Διαφορά γραμμικού και ακτινικού gradient;
Τα γραμμικά gradient μεταβαίνουν χρώματα κατά μήκος ευθείας που ορίζεται από γωνία ή λέξη-κλειδί κατεύθυνσης. Τα ακτινικά gradient μεταβαίνουν χρώματα προς τα έξω από ένα κεντρικό σημείο σε κυκλικά ή ελλειπτικά σχήματα.
Πόσες στάσεις χρώματος μπορώ να χρησιμοποιήσω;
Μπορείτε να χρησιμοποιήσετε όσες στάσεις χρώματος χρειάζεστε. Κάθε στάση ορίζει ένα χρώμα και προαιρετικά μια θέση (0% έως 100%) κατά μήκος της γραμμής gradient. Πολλαπλές στάσεις δημιουργούν πολύπλοκες πολύχρωμες μεταβάσεις.
Πώς χρησιμοποιώ τον δημιουργημένο κώδικα CSS;
Αντιγράψτε τον δημιουργημένο κώδικα CSS και επικολλήστε τον ως τιμή για την ιδιότητα background ή background-image στο φύλλο στυλ CSS. Ο κώδικας λειτουργεί σε όλα τα σύγχρονα προγράμματα περιήγησης.
Τι είναι οι στάσεις χρώματος στα gradient;
Οι στάσεις χρώματος ορίζουν συγκεκριμένα χρώματα σε συγκεκριμένες θέσεις κατά μήκος της γραμμής gradient. Για παράδειγμα, "red 0%, blue 50%, green 100%" δημιουργεί ένα gradient από κόκκινο μέσω μπλε στο μέσο προς πράσινο.
Μπορώ να δημιουργήσω γωνιακά gradient;
Ναι, τα γραμμικά gradient υποστηρίζουν τιμές γωνίας από 0deg έως 360deg. Μπορείτε επίσης να χρησιμοποιήσετε λέξεις-κλειδιά κατεύθυνσης όπως "to right", "to bottom", "to top left".
Τα CSS gradient είναι ανταποκρινόμενα;
Ναι, τα CSS gradient είναι εγγενώς ανταποκρινόμενα επειδή είναι διανυσματικά και αποδίδονται από το πρόγραμμα περιήγησης. Κλιμακώνονται τέλεια σε οποιοδήποτε μέγεθος χωρίς απώλεια ποιότητας ή αύξηση αρχείου.
Τα CSS gradient επηρεάζουν την απόδοση;
Τα CSS gradient είναι γενικά πολύ αποδοτικά. Εξαλείφουν αιτήματα HTTP για αρχεία εικόνας και επιταχύνονται από υλικό. Ωστόσο, εξαιρετικά πολύπλοκα gradient μπορεί να επηρεάσουν την απόδοση σε συσκευές χαμηλού επιπέδου.
Μπορώ να χρησιμοποιήσω gradient σε φόντο και περιγράμματα;
Ναι, τα gradient μπορούν να χρησιμοποιηθούν για background-image, border-image, mask-image και οποιαδήποτε ιδιότητα δέχεται τιμές εικόνας CSS.
Ποια προγράμματα περιήγησης υποστηρίζουν CSS gradient;
Όλα τα σύγχρονα προγράμματα περιήγησης υποστηρίζουν CSS gradient: Chrome, Firefox, Safari, Edge και Opera. Η υποστήριξη είναι εξαιρετική από IE10. Τα προθέματα κατασκευαστή δεν απαιτούνται πλέον.
Πώς δημιουργώ επαναλαμβανόμενο gradient;
Χρησιμοποιήστε repeating-linear-gradient ή repeating-radial-gradient αντί των τυπικών εκδόσεων. Επαναλαμβάνουν το μοτίβο gradient για να γεμίσουν ολόκληρο το στοιχείο, δημιουργώντας ριγέ ή μοτίβα.
Μπορώ να ανιμαίσω τα CSS gradient;
Τα CSS gradient δεν μπορούν να ανιμαιστούν απευθείας με μεταβάσεις CSS. Μπορείτε όμως να ανιμαίσετε background-position, background-size ή να χρησιμοποιήσετε προσαρμοσμένες ιδιότητες CSS με @property.
Αυτή η γεννήτρια gradient είναι δωρεάν;
Ναι, αυτή η γεννήτρια CSS gradient είναι εντελώς δωρεάν. Δεν απαιτείται εγγραφή, δεν υπάρχουν όρια χρήσης και όλος ο κώδικας είναι δικός σας για οποιοδήποτε έργο χωρίς απόδοση.
Πώς να χρησιμοποιήσετε το Γεννήτρια CSS Gradient
Δημιουργήστε CSS gradients οπτικά και αντιγράψτε αμέσως κώδικα έτοιμο για παραγωγή. Το rendering γίνεται τοπικά στον browser σας, χωρίς ανεβάσματα.
- Επιλέξτε το Type του gradient: linear-gradient ή radial-gradient.
- Ορίστε το Angle για γραμμικά gradients ή διαλέξτε Shape όπως circle ή ellipse για ακτινωτά.
- Προσθέστε, αλλάξτε χρώματα και σύρετε τα color stops στην ενότητα Color Stops.
- Κάντε κλικ σε ένα δείγμα κάτω από τα Presets για να ξεκινήσετε από έτοιμο μείγμα.
- Αντιγράψτε το CSS που δημιουργήθηκε και επικολλήστε το στο stylesheet σας.
Βάλτε δύο stops με διαφορετικά χρώματα στην ίδια θέση για απότομη μετάβαση — γρήγορος τρόπος για ρίγες χωρίς εικόνες.
Σχετικά εργαλεία
- Γεννήτρια CSS Box Shadow Δωρεάν διαδικτυακή γεννήτρια CSS box-shadow. Δημιουργήστε οπτικά όμορφες σκιές με ρυθμιζόμενη μετατόπιση, θόλωση, εξάπλωση, χρώμα και inset. Ζωντανή προεπισκόπηση και άμεση αντιγραφή κώδικα.
- Γεννήτρια Border Radius CSS Οπτική γεννήτρια border-radius CSS. Προσαρμόστε κάθε γωνία ανεξάρτητα με ζωντανή προεπισκόπηση και αντιγράψτε τον κώδικα CSS άμεσα.
- Γεννήτρια CSS Grid Δωρεάν οπτική γεννήτρια CSS Grid με ζωντανή προεπισκόπηση. Σχεδιάστε responsive διατάξεις πλέγματος διαδραστικά και εξάγετε έτοιμο CSS κώδικα αμέσως.
- Γεννήτρια CSS Flexbox Οπτική γεννήτρια CSS Flexbox με ζωντανή προεπισκόπηση. Προσαρμόστε τις ιδιότητες flex και λάβετε έτοιμο κώδικα CSS.
- Γεννήτρια Border Radius Δωρεάν δημιουργική γεννήτρια border-radius online. Σύρετε 8 λαβές ή επιλέξτε ένα έτοιμο blob για να δημιουργήσετε οργανικά σχήματα CSS και να αντιγράψετε τον κώδικα άμεσα.
- Μετατροπέας Χρωμάτων Δωρεάν διαδικτυακός μετατροπέας χρωμάτων. Άμεση μετατροπή μορφών HEX, RGB, HSL, HSV με οπτικό επιλογέα. 100% ιδιωτικό, εκτελείται στο πρόγραμμα περιήγησής σας.
- Γεννήτρια CSS Easing Δωρεάν online γεννήτρια CSS easing. Σύρετε τα σημεία ελέγχου του cubic-bezier σε μια διαδραστική καμπύλη, επιλέξτε από 18 προεπιλογές, δείτε μπάλα σε βρόχο animation και αντιγράψτε τη συνάρτηση χρονισμού άμεσα.
- Γεννήτρια Text Shadow CSS Δωρεάν online γεννήτρια text-shadow CSS. Στοίβαξε πολλές στρώσεις σκιάς με μετατόπιση, θόλωση, χρώμα και αδιαφάνεια, δοκίμασε προεπιλογές Neon, 3D, Retro και αντίγραψε το CSS άμεσα.