Κύρια σημεία
- 01Όλοι οι τρεις τύποι CSS gradient — γραμμικό, ακτινικό και κωνικό — υποστηρίζονται με live preview.
- 02Προσθέστε έως έξι χρωματικές στάσεις, καθεμία με ανεξάρτητη θέση και χρώμα.
- 03Το output είναι μια πλήρης δήλωση φόντου έτοιμη για κόλληση σε οποιοδήποτε φύλλο στυλ.
- 04Κανένα sign-up, κανένα install και τίποτα δεν φορτώνεται — όλα τρέχουν στο πρόγραμμα περιήγησής σας.
Γιατί να χρησιμοποιήσετε ένα Visual Gradient Generator;
Η γραφή CSS gradients στο χέρι γίνεται κουραστική γρήγορα. Η σύνταξη είναι αναγνώσιμη μόλις την ξέρετε, αλλά η επιλογή ακριβών θέσεων στάσης και χρωμάτων χωρίς μια οπτική προεπισκόπηση μετατρέπει μια απλή απόφαση σχεδίασης σε δοκιμή και σφάλμα στο DevTools. Ένας generator σας επιτρέπει να δείτε το αποτέλεσμα σε πραγματικό χρόνο και να εξαγάγετε καθαρό κώδικα τη στιγμή που φαίνεται σωστό.
Αυτό το εργαλείο υποστηρίζει όλους τους τρεις σύγχρονους τύπους gradient. Το γραμμικό είναι το κλασικό κατευθυντικό μίγμα που θα χρησιμοποιήσετε για hero backgrounds και κουμπιά. Το ακτινικό εξαπλώνεται προς τα έξω από ένα σημείο — εξαιρετικό για spot lighting effects και vignettes. Το κωνικό σαρώνει γύρω από ένα κέντρο, κάνοντάς το το default για pie chart segments, color wheels και spinner indicators. Ξεκινήστε από ένα από τα built-in presets (Lime Swiss, Sunset, Sky, Aurora) ή σχεδιάστε από το μηδέν.
Πώς να δημιουργήσετε ένα CSS Gradient
Ολόκληρη η διαδικασία παίρνει λιγότερο από ένα λεπτό.
- 01
Επιλέξτε ένα τύπο gradient
Επιλέξτε Γραμμικό, Ακτινικό ή Κωνικό από τον επιλογέα τύπου. Για γραμμικό, ορίστε επίσης τη γωνία. Η προεπισκόπηση ενημερώνεται αμέσως.
- 02
Προσθέστε και τοποθετήστε χρωματικές στάσεις
Κάντε κλικ Προσθήκη Στάσης για να εισαγάγετε μια νέα στάση, στη συνέχεια σύρετε τον δρομέα της ή πληκτρολογήστε ένα ποσοστό για να την τοποθετήσετε. Υποστηρίζονται έως έξι στάσεις — οι στάσεις ταξινομούνται ξανά κατά θέση αυτόματα.
- 03
Επιλέξτε το χρώμα κάθε στάσης
Κάντε κλικ στο χρωματικό δείγμα για να ανοίξετε τον επιλογέα χρωμάτων του συστήματος, ή πληκτρολογήστε μια τιμή hex απευθείας. Και τα δύο RGB και hex formats λειτουργούν.
- 04
Προεπισκοπή σε πραγματικό χρόνο
Το πάνελ προεπισκόπησης αποδίδει το gradient σας χρησιμοποιώντας το εγγενές μηχάνημα gradient του προγράμματος περιήγησης, έτσι το αποτέλεσμα ταιριάζει ακριβώς με αυτό που το CSS θα παράγει στην παραγωγή.
- 05
Αντιγράψτε τη δήλωση CSS
Κάντε κλικ Αντιγραφή για να πάρετε τη πλήρη δήλωση background: linear-gradient(...). Επικολλήστε την σε ένα φύλλο στυλ, ένα styled component ή μια Tailwind arbitrary value όπως bg-[<value>].
Κοινές χρήσεις Gradient
Κάθε τύπος gradient έχει τέλειες επιδόσεις σε ένα διαφορετικό σενάριο.
- 01Hero section backgrounds — γραμμικό gradient σε 135° για ένα σύγχρονο διαγώνιο σάρωμα.
- 02Button hover states — λεπτό two-stop γραμμικό gradient για βάθος.
- 03Radial spotlight ή vignette — σκοτεινό-σε-διαφανές ακτινικό σε overlay εικόνας.
- 04Pie charts και progress rings — κωνικό gradient με hard stops.
- 05Color-wheel selector previews — full-spectrum κωνικό gradient.
- 06Κείμενο gradients — εφαρμόστε το gradient στο background, στη συνέχεια χρησιμοποιήστε background-clip: text.
Τρέχει εντελώς στο πρόγραμμα περιήγησής σας
Ο generator gradient τρέχει 100% client-side — δεν στέλνονται δεδομένα σε κανέναν server. Η προεπισκόπηση αποδίδεται από το δικό σας μηχάνημα CSS του προγράμματος περιήγησης, που σημαίνει ότι αυτό που βλέπετε ταιριάζει με αυτό που θα κάνει render οποιοδήποτε πρόγραμμα περιήγησης επισκέπτη με το ίδιο CSS.
Μια πρακτική σημείωση: τα email clients έχουν ακόμα ανώμαλη υποστήριξη για CSS gradients. Αν επικολλάτε generated CSS σε ένα HTML email template, προσθέστε μια solid background-color fallback πριν τη δήλωση gradient έτσι ώστε οι παραλήπτες σε παλαιότερα clients να δούν κάτι λογικό.
Συνήθεις ερωτήσεις CSS Gradient Generator
Ποια είναι η διαφορά μεταξύ γραμμικού, ακτινικού και κωνικού gradient;
Τα γραμμικά gradients μεταβάλλονται κατά μήκος μιας ευθείας γραμμής σε δεδομένη γωνία. Τα ακτινικά gradients εξαπλώνονται προς τα έξω από ένα κεντρικό σημείο — χρήσιμο για highlights και spot effects. Τα κωνικά gradients σαρώνουν γύρω από ένα κέντρο όπως δείκτες ρολογιού — ιδανικά για pie segments και color wheels.
Μπορώ να το χρησιμοποιήσω αυτό για Tailwind CSS projects;
Ναι. Αντιγράψτε την παραγόμενη τιμή και χρησιμοποιήστε την ως Tailwind arbitrary value, για παράδειγμα: bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]. Το Tailwind θα το συμπεριλάβει στο output stylesheet σας.
Ταιριάζει η προεπισκόπηση ακριβώς με αυτό που θα δω στο live site;
Ναι — η προεπισκόπηση αποδίδεται από το ίδιο μηχάνημα browser gradient που θα αποδώσει το live CSS, έτσι το output είναι pixel-accurate.
Μπορώ να χρησιμοποιήσω CSS gradients σε email templates;
Τα περισσότερα email clients δεν υποστηρίζουν αξιόπιστα CSS gradients. Πάντα προσθέστε ένα solid background-color πριν τη δήλωση gradient σας ως fallback.
Υπάρχει όριο στον αριθμό των χρωματικών στάσεων;
Ο generator υποστηρίζει έως έξι στάσεις. Για τις περισσότερες σχέδιαση δύο με τέσσερις είναι αρκετές; περισσότερες από έξι τείνουν να μειώνουν τη σαφήνεια αντί να προσθέτουν πλούτο.