Γεννήτρια Διαβαθμίσεων CSS δωρεάν

Πώς λειτουργεί

Η γεννήτρια διαβαθμίσεων δημιουργεί συμβολοσειρές CSS gradient απευθείας στον browser — χωρίς βιβλιοθήκη, διακομιστή ή μεταφόρτωση. Μια χειρόγραφη συνάρτηση συνθέτει τη σωστή σύνταξη linear-gradient, radial-gradient ή conic-gradient από τα σημεία χρώματος και τη γωνία σας σε πραγματικό χρόνο και μορφοποιεί το αποτέλεσμα για όποιον στόχο εξόδου επιλέξετε.

1. 1
   Ρυθμίστε σημεία και κατεύθυνση

   Ορίζετε 2 έως 6 σημεία χρώματος με τον εγγενή επιλογέα χρώματος του browser και τοποθετείτε καθένα στον άξονα 0–100% με ρυθμιστικό. Για γραμμικές και κωνικές διαβαθμίσεις επιλέγετε επίσης γωνία (0–360°)· για ακτινικές επιλέγετε το σχήμα (έλλειψη ή κύκλος) και τη λέξη-κλειδί μεγέθους που καθορίζει πόσο εκτείνεται η διαβάθμιση.
2. 2
   Το buildCss συνθέτει τη συμβολοσειρά διαβάθμισης

   Σε κάθε αλλαγή, μια τοπική συνάρτηση buildCss ενώνει τις παραμέτρους σας στη σωστή κλήση συνάρτησης CSS — π.χ. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Δεν εμπλέκεται βιβλιοθήκη· η συμβολοσειρά δημιουργείται με απλή λογική template της JavaScript από τον πίνακα σημείων.
3. 3
   Η ζωντανή προεπισκόπηση αποδίδεται μέσω inline style

   Η συμβολοσειρά διαβάθμισης εφαρμόζεται απευθείας σε στοιχείο div ως inline background style, οπότε η ίδια η μηχανή CSS του browser αποδίδει την προεπισκόπηση. Χωρίς canvas ή εικόνα — αυτό που βλέπετε είναι κυριολεκτικά η ιδιότητα CSS σε εφαρμογή.
4. 4
   Έξοδος έτοιμη για αντιγραφή σε τέσσερις μορφές

   Ένας επιλογέας μορφής μετατρέπει την ίδια συμβολοσειρά σε απλό CSS (background: ...), μπλοκ CSS με συμπαγές εναλλακτικό χρώμα, κλάση arbitrary-value του Tailwind ή δήλωση μεταβλητής SCSS. Το κλικ στην Αντιγραφή γράφει την επιλεγμένη έξοδο στο πρόχειρο μέσω navigator.clipboard.writeText. Η τρέχουσα διαβάθμιση κωδικοποιείται επίσης στο hash του URL ώστε να μπορείτε να την αποθηκεύσετε ή να τη μοιραστείτε.

Σχετικά εργαλεία