Γεννήτρια διαβαθμίσεων (Gradient)

Δημιουργήστε μια γραμμική, ακτινωτή ή κωνική διαβάθμιση, προσθέστε σημεία χρώματος, ορίστε την κατεύθυνση και αντιγράψτε το CSS με ένα κλικ.

Τύπος διαβάθμισης
Σημεία χρώματος
CSS
Προσαρμόστε τα σημεία και την κατεύθυνση για να διαμορφώσετε τη διαβάθμισή σας.

Κάθε διαβάθμιση αποδίδεται απευθείας στον περιηγητή σας. Καμία από τις ρυθμίσεις σας δεν μεταφορτώνεται στο BroBroGo.

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

Ποια είναι η διαφορά μεταξύ γραμμικών, ακτινωτών και κωνικών διαβαθμίσεων;

Μια γραμμική (linear) διαβάθμιση αναμιγνύει τα χρώματα κατά μήκος μιας ευθείας γραμμής που κατευθύνετε με μια γωνία. Μια ακτινωτή (radial) διαβάθμιση τα απλώνει προς τα έξω από το κέντρο σε σχήμα κύκλου ή έλλειψης. Μια κωνική (conic) διαβάθμιση τα περιστρέφει γύρω από το κέντρο σαν χρωματικό τροχό.

Τι είναι τα σημεία χρώματος (color stops);

Κάθε σημείο χρώματος (color stop) είναι ένα χρώμα καρφιτσωμένο σε μια θέση κατά μήκος της διαβάθμισης — 0% στην αρχή, 100% στο τέλος. Μετακινήστε ένα σημείο για να αλλάξετε το σημείο κορύφωσης του χρώματος ή προσθέστε περισσότερα σημεία για μια πιο πλούσια ανάμειξη. Μπορείτε να χρησιμοποιήσετε έως και οκτώ.

Πώς ελέγχω την κατεύθυνση;

Για μια γραμμική (linear) ή κωνική (conic) διαβάθμιση, το ρυθμιστικό γωνίας ορίζει την κατεύθυνση — οι 0° δείχνουν προς τα πάνω, οι 90° προς τα δεξιά. Μια ακτινωτή (radial) διαβάθμιση δεν έχει γωνία. Αντ' αυτού, επιλέξτε σχήμα κύκλου ή έλλειψης για να αλλάξετε τον τρόπο εξάπλωσής της.