Δημιουργός Ντεγκραντέ CSS

Δημιουργήστε δωρεάν όμορφα ντεγκραντέ CSS online. Σχεδιάστε γραμμικά και ακτινωτά ντεγκραντέ με πολλαπλές στάσεις χρώματος και αντιγράψτε τον κώδικα CSS αμέσως.

Preview
CSS Code

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

  1. Επιλέξτε τον τύπο της διαβάθμισης – γραμμική ή ακτινωτή – ανάλογα με τις ανάγκες του σχεδίου σας.
  2. Προσθέστε σημεία χρώματος κάνοντας κλικ στο ρυθμιστικό και επιλέγοντας χρώματα από την παλέτα.
  3. Ρυθμίστε τη γωνία ή την κατεύθυνση της διαβάθμισης χρησιμοποιώντας τον περιστροφικό ρυθμιστή.
  4. Παρακολουθήστε το αποτέλεσμα σε πραγματικό χρόνο στην περιοχή προεπισκόπησης.
  5. Αντιγράψτε τον παραγόμενο κώδικα CSS με ένα κλικ και επικολλήστε τον απευθείας στο έργο σας.

Παράδειγμα

Είσοδος: Γραμμική διαβάθμιση: από #11998E (0%) έως #38EF7D (100%), γωνία 120°
Αποτέλεσμα: background: linear-gradient(120deg, #11998E 0%, #38EF7D 100%);

Συχνές ερωτήσεις

Ναι, όλη η επεξεργασία γίνεται απευθείας στον browser σας. Κανένα δεδομένο δεν αποστέλλεται σε κανέναν διακομιστή, οπότε η εργασία σας παραμένει πλήρως ιδιωτική.

Ναι, μπορείτε να προσθέσετε απεριόριστα σημεία χρώματος για να δημιουργήσετε σύνθετες πολύχρωμες διαβαθμίσεις.

Η γραμμική διαβάθμιση μεταβαίνει από ένα χρώμα σε άλλο κατά μήκος μιας ευθείας γραμμής, ενώ η ακτινωτή εξαπλώνεται από ένα κεντρικό σημείο προς τα έξω σε κυκλική μορφή.

Όχι, το εργαλείο είναι εντελώς δωρεάν και δεν απαιτεί εγγραφή ή σύνδεση.