Πώς λειτουργεί το κείμενο με διαβάθμιση στο CSS;

Το CSS δεν διαθέτει ιδιότητα «διαβάθμισης κειμένου». Η συνήθης τεχνική είναι να χρησιμοποιήσετε μια διαβάθμιση ως φόντο του στοιχείου, να περικόψετε αυτό το φόντο στο σχήμα των γραμμάτων με το background-clip: text και να κάνετε το γέμισμα του κειμένου διαφανές, ώστε να φαίνεται η διαβάθμιση.

Περιγραφή εργαλείου

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

Ο κανόνας που δημιουργείται έχει την εξής μορφή:

.gradient-text {
  background-image: linear-gradient(135deg, #f97316 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
CSS

Το τελικό αποτέλεσμα περιλαμβάνει επίσης τις ρυθμίσεις γραμματοσειράς και τους κανόνες αναδίπλωσης.

Δυνατότητες

  • Γραμμική διαβάθμιση δύο χρωμάτων με γωνία από 0 έως 360 μοίρες
  • Ρυθμίσεις οικογένειας γραμματοσειράς, πάχους και μεγέθους
  • Ζωντανή προεπισκόπηση που μπορείτε να εξαγάγετε ως εικόνα, καθώς και έτοιμος κώδικας CSS για επικόλληση