Γεννήτρια Μοτίβων Φόντου CSS

Αυτό το εργαλείο δημιουργεί επαναλαμβανόμενα μοτίβα φόντου χρησιμοποιώντας μόνο διαβαθμίσεις CSS — χωρίς απαιτούμενα αρχεία εικόνων. Επιλέξτε πουά κουκκίδες, διαγώνιες ρίγες, σκακιέρα, ή γραμμές πλέγματος, προσαρμόστε τα χρώματα και το διάστημα, και αντιγράψτε το background-image CSS κατευθείαν στο φύλλο στυλ σας.

Τι είναι αυτό το εργαλείο;

Η CSS μπορεί να σχεδιάσει επαναλαμβανόμενα μοτίβα χωρίς αρχεία εικόνων χρησιμοποιώντας διαβαθμίσεις — radial-gradient() και linear-gradient() — ως background-image, σε συνδυασμό με ένα background-size μικρότερο από το στοιχείο ώστε η διαβάθμιση να παραθέτει σε πλακίδια και να επαναλαμβάνεται. Οι πουά κουκκίδες χρησιμοποιούν επαναλαμβανόμενη radial-gradient, οι ρίγες και οι σκακιέρες χρησιμοποιούν επαναλαμβανόμενη ή επιστρωμένη linear-gradient(), και οι γραμμές πλέγματος χρησιμοποιούν δύο επικαλυπτόμενες γραμμές linear-gradient().

Αυτό το εργαλείο χτίζει αυτές τις δηλώσεις διαβάθμισης για εσάς. Επιλέξτε τύπο μοτίβου, προσαρμόστε το χρώμα μοτίβου, το χρώμα φόντου, και το διάστημα, και παρακολουθήστε τη ζωντανή προεπισκόπηση να ενημερώνεται — μετά αντιγράψτε το ακριβές background-image και background-size CSS.

Πηγή: CSS Images Module Level 3, W3C — ορίζει τις repeating-linear-gradient() και repeating-radial-gradient(), τις συναρτήσεις από τις οποίες χτίζονται αυτά τα μοτίβα.

Γιατί να το χρησιμοποιήσετε;

Χωρίς αρχεία εικόνων, χωρίς αιτήματα HTTP — το μοτίβο είναι καθαρό CSS και αποδίδεται αμέσως σε οποιαδήποτε ανάλυση, συμπεριλαμβανομένων οθονών retina/υψηλής πυκνότητας.
Πλήρως προσαρμόσιμο χρώμα και διάστημα χωρίς χειρόγραφη σύνταξη διαβάθμισης ή υπολογισμό μαθηματικών παράθεσης.
Η ζωντανή προεπισκόπηση δείχνει το ακριβές επαναλαμβανόμενο μοτίβο πριν αντιγράψετε οτιδήποτε.
Κλιμακώνεται καθαρά καθώς είναι διανυσματικά μαθηματικά, όχι εικόνα ράστερ — χωρίς θόλωμα όταν το στοιχείο αλλάζει μέγεθος.
Τρέχει εξ ολοκλήρου στον περιηγητή σας — τίποτα από όσα ρυθμίζετε δεν ανεβαίνει πουθενά.
Δωρεάν, χωρίς εγγραφή, λειτουργεί σε κινητό.

Πώς χρησιμοποιείται

Επιλέξτε τύπο μοτίβου: πουά κουκκίδες, διαγώνιες ρίγες, σκακιέρα, ή γραμμές πλέγματος.
Επιλέξτε το χρώμα μοτίβου και το χρώμα φόντου που εμφανίζεται ανάμεσα/πίσω από τα σχήματα του μοτίβου.
Προσαρμόστε τον ολισθητή μεγέθους για να κάνετε τις κουκκίδες, ρίγες ή κελιά πλέγματος μεγαλύτερα ή μικρότερα — αυτό ελέγχει επίσης πόσο πυκνά επαναλαμβάνεται το μοτίβο.
Αντιγράψτε το παραγόμενο CSS και επικολλήστε το ως background-image (και background-size/background-position όπου εμφανίζεται) οποιουδήποτε στοιχείου.

Παράδειγμα

Είσοδος

Μοτίβο: πουά κουκκίδες · Χρώμα: μπλε · Φόντο: λευκό · Μέγεθος: 24px

Έξοδος

background-color: #ffffff;
background-image: radial-gradient(rgba(59, 130, 246, 1) 3px, transparent 3px);
background-size: 24px 24px;
background-position: 0 0;

Ένα κλασικό ανοιχτόχρωμο μοτίβο πουά κουκκίδων, συχνά χρησιμοποιούμενο ως διακριτικό φόντο ενότητας ή υφή κάρτας.

Πώς χτίζεται κάθε μοτίβο

Πουά κουκκίδες: μια radial-gradient() σχεδιάζει έναν μικρό γεμάτο κύκλο, μετά το background-size το κάνει να επαναλαμβάνεται ως πλέγμα κουκκίδων σε πλακίδια.
Διαγώνιες ρίγες: μια repeating-linear-gradient() σε γωνία 45 μοιρών εναλλάσσεται μεταξύ του χρώματος μοτίβου και του χρώματος φόντου σε σταθερό διάστημα.
Σκακιέρα: δύο επικαλυπτόμενα στρώματα linear-gradient() σε 45 μοίρες, μετατοπισμένα το ένα από το άλλο κατά μισό πλακίδιο, παράγουν εναλλασσόμενα ανοιχτόχρωμα/σκουρόχρωμα τετράγωνα.
Γραμμές πλέγματος: δύο λεπτές γραμμές linear-gradient() — μία οριζόντια, μία κάθετη — παρατιθέμενες σε πλακίδια στο επιλεγμένο διάστημα για να σχηματίσουν πλέγμα, παρόμοιο με χαρτί γραφημάτων.

Πότε να χρησιμοποιήσετε μοτίβα CSS αντί για αρχεία εικόνων

Ένα μοτίβο διαβάθμισης CSS δεν έχει μέγεθος αρχείου και κανένα αίτημα HTTP, οπότε φορτώνει αμέσως και δεν φαίνεται ποτέ θολό σε οθόνες υψηλής πυκνότητας, σε αντίθεση με ένα πλακίδιο φόντου ράστερ PNG. Είναι ιδανικό για διακριτικές υφές πίσω από κείμενο, διαχωριστικά ενοτήτων, εικονογραφήσεις κενής κατάστασης, ή κάρτες τοποθέτησης. Για σύνθετα εικονογραφημένα ή φωτογραφικά μοτίβα, μια πραγματική εικόνα παραμένει το σωστό εργαλείο — οι διαβαθμίσεις CSS ταιριάζουν καλύτερα σε απλά, γεωμετρικά, επαναλαμβανόμενα σχήματα όπως αυτά εδώ.

Συνδυασμός με άλλα εφέ CSS

Τα μοτίβα λειτουργούν καλά ως φόντο πίσω από κάρτες glassmorphism, καθώς η θόλωση χρειάζεται κάτι με οπτική υφή από πίσω για να είναι ορατή. Ταιριάζουν επίσης φυσικά με στρογγυλεμένες γωνίες στο στοιχείο-περιέκτη.

→ Γεννήτρια CSS Glassmorphism · Δημιουργός Border Radius

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

Απαιτούν αυτά τα μοτίβα αρχεία εικόνων;

Όχι. Κάθε μοτίβο εδώ παράγεται καθαρά με διαβαθμίσεις CSS ως background-image — δεν εμπλέκεται κανένα PNG, SVG ή άλλο αρχείο, οπότε δεν υπάρχει επιπλέον αίτημα HTTP και κανένας κίνδυνος θολώματος σε οθόνες υψηλής ανάλυσης.

Μπορώ να αλλάξω πόσο μεγάλο είναι το μοτίβο;

Ναι — ο ολισθητής μεγέθους ελέγχει το background-size, που ορίζει πόσο μεγάλο είναι ένα επαναλαμβανόμενο πλακίδιο του μοτίβου. Ένα μικρότερο μέγεθος πακετάρει τις κουκκίδες, ρίγες ή κελιά πλέγματος πιο κοντά· ένα μεγαλύτερο τις απλώνει.

Γιατί το μοτίβο σκακιέρας χρησιμοποιεί δύο διαβαθμίσεις;

Μια μεμονωμένη linear-gradient() μπορεί να εναλλάσσει χρώματα μόνο σε μία κατεύθυνση. Η επίστρωση δύο διαβαθμίσεων 45 μοιρών, μετατοπισμένων η μία από την άλλη κατά μισό πλακίδιο, είναι αυτό που παράγει τα εναλλασσόμενα ανοιχτόχρωμα/σκουρόχρωμα τετράγωνα μιας σκακιέρας — αυτή είναι η τυπική τεχνική για σκακιέρες μόνο με CSS.

Θα φαίνεται καθαρό αυτό το μοτίβο σε οθόνες retina/υψηλής πυκνότητας;

Ναι. Επειδή το μοτίβο είναι μαθηματική διαβάθμιση αντί για εικόνα bitmap, αποδίδεται σε όποια ανάλυση χρειάζεται η οθόνη, χωρίς αναβάθμιση ή θόλωμα — σε αντίθεση με ένα μικρό πλακίδιο εικόνας ράστερ τεντωμένο ή επαναλαμβανόμενο σε υψηλή πυκνότητα εικονοστοιχείων.

Μπορώ να χρησιμοποιήσω αυτά τα μοτίβα ως φόντο ολόκληρης σελίδας;

Ναι — εφαρμόστε το παραγόμενο background-image, background-size και background-position (όπου υπάρχει) στο body ή σε οποιοδήποτε στοιχείο-περιέκτη πλήρους πλάτους. Έχετε υπόψη την αντίθεση: ένα πολυσύχναστο, υψηλής αντίθεσης μοτίβο πίσω από κείμενο σώματος μπορεί να βλάψει την αναγνωσιμότητα, οπότε πιο ανοιχτές/διακριτικές ρυθμίσεις συνήθως λειτουργούν καλύτερα για μεγάλες περιοχές φόντου.