Online CSS Gradient Tool
Το CSS Gradient είναι ένας χαρούμενος μικρός ιστότοπος και δωρεάν εργαλείο που σας επιτρέπει να δημιουργήσετε ένα φόντο διαβάθμισης για ιστότοπους.
Οι διαβαθμίσεις CSS σάς φαίνεται να εμφανίζετε ομαλές μεταβάσεις μεταξύ δύο ή περισσότερων καθορισμένων χρωμάτων.
Το CSS ορίζει δύο τύπους διαβαθμίσεων:
- Γραμμικές διαβαθμίσεις (κατεβαίνει/επάνω/αριστερά/δεξιά/διαγώνια)
- Ακτινικές διαβαθμίσεις (που ορίζονται από το κέντρο τους)
Γραμμικές διαβαθμίσεις CSS
Για να δημιουργήσετε μια γραμμική κλίση πρέπει να ορίσετε τουλάχιστον δύο χρωματικές στάσεις. Οι χρωματικές στάσεις είναι τα χρώματα μεταξύ των οποίων θέλετε να αποδώσετε ομαλές μεταβάσεις. Μπορείτε επίσης να ορίσετε ένα σημείο εκκίνησης και μια κατεύθυνση (ή μια γωνία) μαζί με το εφέ κλίσης.
Σύνταξη
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
CSS Radial Gradients
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
The following example shows a radial gradient with the shape of a circle:
