Γεννήτρια CSS Gradient

Το να γράφεις linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) με το χέρι και να κάνεις reload τη σελίδα για να το δεις είναι ένας αργός κύκλος. Αυτή η γεννήτρια τον κλείνει: επίλεξε γραμμικό, ακτινικό ή κωνικό, σύρε το ρυθμιστικό γωνίας, όρισε κάθε χρωματική στάση με έναν native επιλογέα χρώματος και μια ποσοστιαία θέση — και η προεπισκόπηση πλήρους πλάτους ανανεώνεται με κάθε αλλαγή, με την τελική γραμμή φόντου πάντα έτοιμη για αντιγραφή.

Οι τρεις τύποι gradient καλύπτουν διαφορετικές ανάγκες. Τα γραμμικά gradients ξεθωριάζουν κατά μήκος μιας κατεύθυνσης και γεμίζουν τα περισσότερα hero sections και κουμπιά· τα ακτινικά gradients ακτινοβολούν από το κέντρο για λάμψεις και βινιέτες· τα κωνικά gradients σαρώνουν γύρω από το κέντρο και τροφοδοτούν pie charts και χρωματικούς τροχούς. Μπορείς να αλλάξεις τύπο ανά πάσα στιγμή — οι στάσεις σου μεταφέρονται, οπότε η σύγκριση των τριών παίρνει δευτερόλεπτα.

Έως έξι χρωματικές στάσεις σου δίνουν χώρο για πολυχρωματικά σχέδια και οι σελίδες προεπιλογών προσφέρουν δοκιμασμένους συνδυασμούς — ένα ζεστό ηλιοβασίλεμα, έναν ήρεμο ωκεανό και ένα απαλό παστέλ ζεύγος — ως σημεία εκκίνησης που μπορείς να πειράξεις αντί για λευκούς καμβάδες. Σημείωσε τον διαμοιρασμό εργασιών: το εργαλείο χρωματικής παλέτας σε αυτό το site επιλέγει αρμονικά επίπεδα χρώματα και ο μετατροπέας χρωματικών format μεταφράζει μια τιμή μεταξύ HEX, RGB και HSL, ενώ αυτό το εργαλείο κάνει μια διαφορετική δουλειά — μετατρέπει τα επιλεγμένα χρώματα σε έτοιμο κώδικα CSS gradient.

Όλα τρέχουν τοπικά στον browser σου: χωρίς upload, χωρίς λογαριασμό, χωρίς server round-trips, και η γεννήτρια συνεχίζει να δουλεύει offline μόλις φορτωθεί.