Πώς δημιουργώ ένα CSS box-shadow και αντιγράφω τον κώδικα;

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

Μπορώ να στοιβάξω πολλαπλές σκιές σε ένα στοιχείο;

Ναι. Πατήστε + Προσθήκη επιπέδου σκιάς για να προσθέσετε περισσότερα επίπεδα, στη συνέχεια αναδιατάξτε τα, Απόκρυψη ή Αφαίρεση για το καθένα. Τα επίπεδα ενώνονται με κόμματα σε μία ενιαία τιμή box-shadow.

Πώς φτιάχνω μια εσωτερική σκιά;

Επιλέξτε ένα επίπεδο και ενεργοποιήστε την Εσωτερική σκιά ή φορτώστε την προεπιλογή Εσωτερική. Η έξοδος περιλαμβάνει τότε τη λέξη-κλειδί inset για αυτό το επίπεδο.

Μπορώ να πάρω μια κλάση Tailwind αντί για απλό CSS;

Ναι. Εκτός από τη δήλωση CSS, το εργαλείο παράγει μια κλάση αυθαίρετης τιμής Tailwind στη μορφή shadow-[...], με τα κενά να αντικαθίστανται από κάτω παύλες, έτοιμη για επικόλληση στον κώδικά σας.

Υπάρχει ευκολότερος τρόπος να ορίσω τη θέση της σκιάς από τους δρομείς;

Ναι. Σύρετε το πλαίσιο προεπισκόπησης για να μετακινήσετε τη σκιά του ενεργού επιπέδου και κρατήστε πατημένο το Shift για λεπτομερή έλεγχο. Μπορείτε επίσης να αλλάξετε το φόντο της Προεπισκόπησης και το Χρώμα κουτιού για να δείτε πώς φαίνεται η σκιά στο σχέδιό σας.

Είναι πραγματικά δωρεάν;

Ναι. Κάθε εργαλείο είναι δωρεάν στη χρήση, χωρίς λογαριασμό και χωρίς πιστωτική κάρτα. Η εργασία εκτελείται στη συσκευή σας και όχι στους διακομιστές μας, γεγονός που την καθιστά δωρεάν στη λειτουργία της.

Λειτουργεί σε κινητό;

Ναι. Λειτουργεί στα σύγχρονα προγράμματα περιήγησης κινητών σε iOS και Android, χωρίς εγκατάσταση.

🎨

Γεννήτρια Box Shadow CSS δωρεάν

Οπτικός κατασκευαστής CSS box-shadow με ζωντανή προεπισκόπηση, στοίβαξη πολλαπλών επιπέδων, επιλογέα χρωμάτων, εναλλαγή inset και αντιγραφή με ένα κλικ. Περιλαμβάνει προεπιλογές Material, neumorphism και glow.

Εκτελείται στο πρόγραμμα περιήγησηςΧωρίς εγγραφή, χωρίς αναδυόμενα παράθυραΔεν απαιτείται σύνδεσηΔωρεάν για πάντα

Λειτουργεί εκτός σύνδεσης μόλις φορτωθεί

Προεπισκόπηση φόντου

Σύρετε το πλαίσιο για να τοποθετήσετε τη σκιά του ενεργού στρώματος - κρατήστε το Shift για λεπτό έλεγχο

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Προεπιλογές

Χρώμα κουτιού

Ακτίνα γωνιών (16px)

x (0px)

y (4px)

θόλωση (12px)

εξάπλωση (0px)

Χρώμα

Αδιαφάνεια (15%)

Εσωτερική σκιά

Συνηθισμένες χρήσεις

Σκιές κάρτας UIΔημιουργήστε κομψές σκιές καρτών για ταμπλό, πλέγματα προϊόντων και ταμπλό.
Εφέ πίεσης κουμπιούΔημιουργήστε σκιές κουμπιού που μιμούνται το βάθος πραγματικού κόσμου και τα κράτη της τύπωσης.
Neumorphism μαλακό UIΔημιουργήστε το μαλακό-UI neumorphism εμφάνισης με ζευγαρωμένες ανάμεσες και σκοτεινές σκιές.
Σκιές Modal & PopoverΔημιουργήστε το ανυψωμένο, επιπλέον αίσθημα για διαλόγους και αναπτυσσόμενα.
Εφέ λάμψης και δακτυλίου εστίασηςΔημιουργήστε εφέ φωτεινής έμφασης, δαχτυλίδια εστίασης και εφέ σε στυλ neon.

Πώς λειτουργεί

Η γεννήτρια box-shadow είναι εργαλείο React εξ ολοκλήρου στην πλευρά του πελάτη — χωρίς διακομιστή ή βιβλιοθήκη. Διατηρεί στο state μια λίστα αντικειμένων επιπέδων σκιάς, συνθέτει έγκυρες συμβολοσειρές CSS box-shadow σε κάθε αλλαγή με χειρόγραφο μορφοποιητή rgba() και τις εφαρμόζει απευθείας σε στοιχείο προεπισκόπησης μέσω του style prop του React, ώστε η μηχανή απόδοσης του browser να σχεδιάζει αμέσως το αποτέλεσμα.

1
Οι παράμετροι επιπέδων τροφοδοτούν τον μορφοποιητή
Κάθε επίπεδο σκιάς αποθηκεύει μετατοπίσεις x/y, θόλωμα, εξάπλωση, χρώμα hex και τιμή αδιαφάνειας. Σε κάθε αλλαγή, μια μικρή συνάρτηση shadowToCss μετατρέπει το χρώμα hex σε συνιστώσες RGB με regex και συνθέτει τη συμβολοσειρά rgba() — για παράδειγμα, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Πολλά επίπεδα ενώνονται με κόμματα.
2
Ο browser αποδίδει τη ζωντανή προεπισκόπηση
Η συμβολοσειρά ανατίθεται στην ιδιότητα boxShadow ενός στοιχείου div απευθείας στο JSX. Το React ενημερώνει το DOM και η μηχανή CSS του browser ζωγραφίζει αμέσως τη σκιά — χωρίς canvas ή WebGL, μόνο εγγενής απόδοση CSS.
3
Η τοποθέτηση με σύρσιμο χρησιμοποιεί το Pointer Events API
Κάνοντας κλικ και σύροντας το πλαίσιο προεπισκόπησης καλείται setPointerCapture στο στοιχείο και παρακολουθούνται οι διαφορές onPointerMove για ενημέρωση των μετατοπίσεων x και y του ενεργού επιπέδου σε πραγματικό χρόνο. Κρατώντας πατημένο το Shift εφαρμόζεται συντελεστής 0.25x για λεπτή τοποθέτηση.
4
Η έξοδος αντιγράφεται στο πρόχειρο
Το εργαλείο παράγει δύο μορφές εξόδου από τα ίδια δεδομένα επιπέδων: μια τυπική δήλωση CSS box-shadow και μια κλάση arbitrary-value του Tailwind (shadow-[...]) όπου τα κενά αντικαθίστανται από κάτω παύλες σύμφωνα με τη σύνταξη του Tailwind. Η αντιγραφή με ένα κλικ χρησιμοποιεί navigator.clipboard.writeText.