Γεννήτρια CSS Box Shadow & Border Radius

Γεννήτρια CSS Box Shadow & Border Radius

🎨 Δωρεάν γεννήτρια CSS box-shadow και border-radius με ζωντανή προεπισκόπηση. Δημιουργήστε όμορφες σκιές, στρογγυλεμένες γωνίες και μοντέρνα UI εφέ. Έτοιμος κώδικας για αντιγραφή-επικόλληση για web design.

Ιδιότητα Box Shadow

Η ιδιότητα CSS box-shadow προσθέτει εφέ σκιάς γύρω από το πλαίσιο ενός στοιχείου. Μπορείτε να ορίσετε πολλαπλά εφέ χωρισμένα με κόμματα. Μια σκιά περιγράφεται από μετατοπίσεις X και Y, ακτίνα θολώματος και εξάπλωσης, και χρώμα.

Σύνταξη: box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

Παράμετροι σκιάς

• Μετατόπιση X (οριζόντια): θετικές τιμές μετακινούν τη σκιά δεξιά, αρνητικές αριστερά
• Μετατόπιση Y (κάθετη): θετικές τιμές μετακινούν τη σκιά κάτω, αρνητικές πάνω
• Ακτίνα θολώματος: μεγαλύτερες τιμές δημιουργούν περισσότερο θόλωμα. 0 = καθαρή σκιά
• Ακτίνα εξάπλωσης: θετικές τιμές επεκτείνουν τη σκιά, αρνητικές τη συρρικνώνουν
• Χρώμα: οποιαδήποτε τιμή χρώματος CSS (hex, rgb, rgba, hsl)
• Inset: μετατρέπει τη σκιά σε εσωτερική αντί για εξωτερική

Ιδιότητα Border Radius

Η ιδιότητα border-radius στρογγυλεύει τις γωνίες του εξωτερικού περιγράμματος ενός στοιχείου. Μπορείτε να ορίσετε μία ακτίνα για κυκλικές γωνίες ή δύο ακτίνες για ελλειπτικές γωνίες.

Σύνταξη: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

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

• Κάρτες: διακριτική σκιά (0 4px 6px rgba(0,0,0,0.1)) με μεσαία ακτίνα (8px)
• Κουμπιά: έγχρωμη σκιά που ταιριάζει με το κουμπί για εφέ βάθους
• Modals: μεγάλη σκιά (0 20px 25px rgba(0,0,0,0.15)) για να φαίνονται «αιωρούμενα»
• Εικόνες: κυκλικά avatars (border-radius: 50%) ή στρογγυλεμένες μικρογραφίες (8–16px)
• Πεδία εισαγωγής: inset σκιά για κατάσταση πατήματος/εστίασης
• Neumorphic design: πολλαπλές σκιές (φωτεινή και σκούρα) με αντίστοιχο φόντο

Καλές πρακτικές για σκιές

• Χρησιμοποιήστε διακριτικές σκιές: 10–20% διαφάνεια συνήθως αρκεί για βάθος
• Y-offset > X-offset: μιμείται φυσικό φως από πάνω
• Μεγαλύτερο blur για «ύψος»: περισσότερο θόλωμα = φαίνεται πιο ψηλά από τη σελίδα
• Ταιριάξτε το χρώμα σκιάς: χρησιμοποιήστε το χρώμα του στοιχείου με χαμηλή διαφάνεια
• Απόδοση: αποφύγετε animation στο box-shadow, προτιμήστε opacity ή transform

Δημοφιλή στυλ σκιάς

• Material Design: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM: 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD: 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG: 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap: 0 0.5rem 1rem rgba(0,0,0,0.15)

Μοτίβα Border Radius

• Καμία (0px): κοφτές γωνίες, μοντέρνο μινιμαλιστικό ύφος
• Μικρή (4px): διακριτική στρογγύλευση για inputs/κουμπιά
• Μεσαία (8px): στάνταρ για κάρτες/containers
• Μεγάλη (16px+): πιο φιλικό, «ζεστό» design
• Κάψουλα (999px ή 50%): στρογγυλεμένα άκρα για tags/badges
• Κύκλος (50%): avatars, κουμπιά εικονιδίων (απαιτεί τετράγωνο στοιχείο)

Προχωρημένες τεχνικές

• Πολλαπλές σκιές: συνδυάστε σκιές για πολυεπίπεδα εφέ
• Glow εφέ: 0 0 20px [χρώμα] χωρίς μετατόπιση
• Neumorphism: φωτεινή σκιά πάνω-αριστερά, σκούρα κάτω-δεξιά
• Δαχτυλίδια εστίασης: έγχρωμη σκιά για προσβασιμότητα (0 0 0 3px rgba(χρώμα,0.5))
• 3D εφέ: πολλαπλές σκιές με αυξανόμενη μετατόπιση και blur

Υποστήριξη φυλλομετρητών

Τα box-shadow και border-radius υποστηρίζονται σε όλους τους σύγχρονους browsers. Για IE8 και παλαιότερα, χρησιμοποιήστε vendor prefixes (-webkit-box-shadow, -moz-box-shadow), αν και σήμερα αυτό σπάνια χρειάζεται.

💡 Pro Tip: για hover εφέ, μην κάνετε animate το box-shadow απευθείας γιατί είναι «βαρύ». Αντί γι’ αυτό, δημιουργήστε τη σκιά σε ένα pseudo-element (::before ή ::after) και κάντε animate την opacity του. Έτσι έχετε το ίδιο οπτικό αποτέλεσμα με πολύ καλύτερη απόδοση, ειδικά σε κινητές συσκευές!