Δημιουργός Διαβάθμισης από Εικόνα
Εξαγάγετε μια όμορφη διαβάθμιση από οποιαδήποτε φωτογραφία — αποθέστε εικόνα, επιλέξτε διάθεση και τα κυρίαρχα χρώματα γίνονται draggable σημεία διαβάθμισης. Αντιγράψτε έτοιμο CSS άμεσα.
Σύρτε & αποθέστε μια εικόνα εδώ
ή κάντε κλικ για αναζήτηση — μπορείτε επίσης να επικολλήσετε από το πρόχειρο
Όλα εκτελούνται στο πρόγραμμα περιήγησης — η εικόνα σας δεν μεταφορτώνεται ποτέ, χωρίς εγγραφή, εντελώς δωρεάν.
background: —;
Σχετικά με το Δημιουργός Διαβάθμισης από Εικόνα
Ο Δημιουργός Διαβάθμισης από Εικόνα μετατρέπει οποιαδήποτε φωτογραφία σε μια έτοιμη προς χρήση διαβάθμιση CSS. Ρίξτε, περιηγηθείτε ή επικολλήστε μια εικόνα και το εργαλείο τη διαβάζει σε ένα canvas, εξάγει τα κυρίαρχα χρώματά της και τα διατάσσει ως σημεία διαβάθμισης που μπορείτε να σύρετε, να αλλάξετε χρώμα και να αναδιατάξετε μέχρι το μείγμα να ταιριάζει με το ύφος του πρωτοτύπου.
Ένας επιλογέας διάθεσης — Colorful, Bright, Muted, Deep ή Dark — αλλάζει ποια εξαγόμενα χρώματα γίνονται σημεία διαβάθμισης, ώστε μία φωτογραφία να μπορεί να δώσει αρκετές πολύ διαφορετικές διαβαθμίσεις. Ελέγχετε τον τύπο διαβάθμισης (γραμμική, ακτινική ή κωνική), τη γωνία, και τα ίδια τα σημεία: κάντε κλικ στη μπάρα για να προσθέσετε ένα, σύρετε για επανατοποθέτηση, αντιστρέψτε ή περιστρέψτε με ένα κλικ.
Ολόκληρη η διαδικασία εκτελείται στο πρόγραμμα περιήγησής σας· η εικόνα σας δεν μεταφορτώνεται ποτέ σε διακομιστή. Όταν η προεπισκόπηση φαίνεται σωστή, αντιγράψτε τον πλήρη κανόνα CSS, μόνο την τιμή background, ή τα εξαγόμενα χρώματα μόνα τους — ιδανικό για ενότητες hero, φόντα σελίδων και οπτικά επωνυμίας που προέρχονται από φωτογραφία.
Πώς να χρησιμοποιήσετε το Δημιουργός Διαβάθμισης από Εικόνα
- Σύρετε και αφήστε μια εικόνα, κάντε κλικ για περιήγηση, ή επικολλήστε μία από το πρόχειρό σας.
- Επιλέξτε μια διάθεση — Colorful, Bright, Muted, Deep ή Dark — για να διαλέξετε ποια εξαγόμενα χρώματα γίνονται σημεία.
- Επιλέξτε τον τύπο διαβάθμισης (γραμμική, ακτινική ή κωνική) και ρυθμίστε τη γωνία.
- Σύρετε τα σημεία χρώματος για να βελτιώσετε το μείγμα· προσθέστε, αφαιρέστε, αντιστρέψτε ή ανακατέψτε σημεία όπως χρειάζεται.
- Κάντε κλικ στο «Copy CSS» για να πάρετε τον έτοιμο προς επικόλληση κώδικα διαβάθμισης.