Όλα τα εργαλεία χρωμάτων

Φτιάξτε απρόσκοπτα μοτίβα SVG για φόντο από σχεδόν 2.000 σχέδια: αλλάξτε χρώματα, αποστάσεις και γωνία, μετά αντιγράψτε CSS ή κατεβάστε SVG, PNG, WebP.

Δωρεάν

1Επιλέξτε ένα μοτίβο

Ο τίτλος σας εδώ

Δείτε πώς φαίνεται το μοτίβο πίσω από πραγματικό περιεχόμενο.

Ξεκινήστε
Μοτίβο

Περιήγηση ανά συλλογή


Σχετικά με το Γεννήτρια μοτίβων

Η Γεννήτρια μοτίβων μετατρέπει σχεδόν 2.000 έτοιμα σχέδια σε φόντα που μπορείτε να ρυθμίσετε και να χρησιμοποιήσετε αμέσως. Περιηγηθείτε σε 14 συλλογές, από κύματα, πουά και ψηφιδωτές επιστρώσεις έως ταρτάν, ιαπωνικά σεϊγκάιχα, ισλαμικά αστέρια, βεντάλιες άρ ντεκό, pixel sprites και παραλλαγή, και δείτε το καθένα στα δικά σας χρώματα.

Κάθε σχέδιο είναι διανυσματικό και επαναλαμβάνεται χωρίς ορατή ραφή, σε οποιαδήποτε μεγέθυνση και γωνία. Αλλάξτε έως και έξι χρώματα, τη μεγέθυνση, τη θέση, τις αποστάσεις, το πάχος γραμμής και τη γωνία, μετατρέψτε τα γεμισμένα σχήματα σε περιγράμματα ή αφήστε το μοτίβο να κινείται με επαναλαμβανόμενη κίνηση. Παραγόμενα μοτίβα όπως οι τοπογραφικοί χάρτες, τα κελιά Βορονόι και τα πλακίδια Τρισέ μπορούν να δώσουν νέα παραλλαγή σε κάθε κλικ.

Όταν σας αρέσει το αποτέλεσμα, αντιγράψτε το ως CSS, SCSS, ρύθμιση Tailwind, ενσωματωμένο SVG, data URI ή στοιχείο React ή κατεβάστε SVG, PNG, JPG ή WebP σε οποιοδήποτε μέγεθος έως 8000 pixel, μαζί με ένα μεμονωμένο πλακίδιο για τη δική σας επανάληψη. Όλα εκτελούνται στο πρόγραμμα περιήγησής σας: τίποτα δεν ανεβαίνει σε διακομιστή και δεν χρειάζεται λογαριασμός.

Πώς να χρησιμοποιήσετε το Γεννήτρια μοτίβων

  1. Επιλέξτε ένα μοτίβο: αναζητήστε με όνομα ή φιλτράρετε ανά συλλογή και αριθμό χρωμάτων.
  2. Επιλέξτε τα χρώματα με τους επιλογείς, μια έτοιμη παλέτα ή το «Νέα παλέτα».
  3. Ρυθμίστε τη μεγέθυνση, τη θέση, τις αποστάσεις, το πάχος γραμμής και τη γωνία. Κλειδώστε όποια τιμή θέλετε πριν πατήσετε «Εμπνεύστε με».
  4. Ελέγξτε το αποτέλεσμα με τις προεπισκοπήσεις «Εμφάνιση πλακιδίου», «Σε σελίδα» και «Σε κείμενο».
  5. Αντιγράψτε τον κώδικα ή κατεβάστε το αρχείο και χρησιμοποιήστε το «Αντιγραφή συνδέσμου» για να επιστρέψετε αργότερα ακριβώς σε αυτό το μοτίβο.

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

Ναι. Το εργαλείο είναι δωρεάν, χωρίς εγγραφή και χωρίς όριο: κάθε μοτίβο σχεδιάζεται στο πρόγραμμα περιήγησής σας, επομένως κανένα αρχείο δεν αποστέλλεται σε διακομιστή.

Ναι. Μπορείτε να χρησιμοποιήσετε τα μοτίβα που εξάγετε σε προσωπικές και εμπορικές εργασίες, όπως ιστότοπους, εφαρμογές, συσκευασίες και εκτυπώσεις, χωρίς να απαιτείται αναφορά δημιουργού.

Όχι. Κάθε σχήμα που περνά το άκρο ενός πλακιδίου σχεδιάζεται ξανά στην απέναντι πλευρά, οπότε η επανάληψη είναι απρόσκοπτη. Χρησιμοποιήστε την προεπισκόπηση «Εμφάνιση πλακιδίου» για να δείτε ακριβώς πού ξεκινά και πού τελειώνει ένα πλακίδιο.

Το CSS είναι το απλούστερο: επικολλήστε τον κανόνα στο φύλλο στυλ σας και εφαρμόστε τον σε οποιοδήποτε στοιχείο. Στις 0, 90, 180 ή 270 μοίρες χρησιμοποιεί ένα μικρό πλακίδιο με background-size· σε άλλες γωνίες χρησιμοποιεί ένα SVG που γεμίζει το στοιχείο. Οι εκδόσεις για Tailwind, SCSS, React και data URI περιέχουν το ίδιο μοτίβο.

Η κίνηση είναι ενσωματωμένη στο SVG, γι' αυτό δεν χρειάζεται script και λειτουργεί και ως φόντο CSS στα σύγχρονα προγράμματα περιήγησης. Ελέγξτε την στα προγράμματα περιήγησης που υποστηρίζετε. Τα αρχεία PNG, JPG και WebP παραμένουν εικόνες, γι' αυτό κρατούν μόνο το πρώτο καρέ.

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

Ναι, σχεδόν σε κάθε μοτίβο: ενεργοποιήστε το «Διαφανές φόντο» και εξαγάγετε ως CSS, SVG, PNG ή WebP. Μερικά σχέδια με επικάλυψη κρύβουν σχήματα με το χρώμα του φόντου, γι' αυτό χρειάζονται συμπαγές φόντο. Τα αρχεία JPG δεν υποστηρίζουν διαφάνεια.

Κοινοποίηση

Δημοφιλείς αναζητήσεις
γεννήτρια μοτίβων svg γεννήτρια απρόσκοπτων μοτίβων μοτίβο φόντου css δημιουργία επαναλαμβανόμενου μοτίβου δωρεάν μοτίβα για φόντο γεννήτρια γεωμετρικών μοτίβων μοτίβο φόντου tailwind απρόσκοπτο πλακίδιο png
Χρειάζεστε βοήθεια;
Βρήκατε πρόβλημα με αυτό το εργαλείο; Ενημερώστε μας.
Αναφορά προβλήματος

Προσθέστε αυτό το δωρεάν εργαλείο στον δικό σας ιστότοπο: αντιγράψτε και επικολλήστε τον παρακάτω κώδικα.