Γεννήτρια Box Shadow

Σύρετε τα ρυθμιστικά για να διαμορφώσετε μια σκιά πλαισίου, συνδυάστε επίπεδα για βάθος και αντιγράψτε το έτοιμο CSS αμέσως.

Επίπεδα σκιάς
Επίπεδο 1
CSS
Προσαρμόστε τα ρυθμιστικά για να διαμορφώσετε τη σκιά σας.

Κάθε σκιά αποδίδεται απευθείας στον περιηγητή σας. Καμία από τις ρυθμίσεις σας δεν μεταφορτώνεται στο BroBroGo.

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

Τι ακριβώς ελέγχουν οι τιμές offset, blur και spread;

Η μετατόπιση (offset) μετακινεί τη σκιά αριστερά/δεξιά και πάνω/κάτω, η θόλωση (blur) μαλακώνει τις άκρες της και η εξάπλωση (spread) τη μεγαλώνει ή τη μικραίνει πριν από τη θόλωση. Μια αρνητική τιμή εξάπλωσης συρρικνώνει τη σκιά προς τα μέσα, κάτι που είναι χρήσιμο για μια πιο συμπαγή, κοντινή σκιά.

Τι κάνει η επιλογή εσωτερικής σκιάς (inset);

Μια κανονική σκιά πέφτει έξω από το στοιχείο, όπως το φως πίσω από μια ανασηκωμένη κάρτα. Η επιλογή inset τη μεταφέρει στο εσωτερικό του στοιχείου, κάνοντάς το να φαίνεται βυθισμένο — ιδιαίτερα χρήσιμο για πεδία εισαγωγής ή πατημένα κουμπιά.

Γιατί να χρησιμοποιήσω περισσότερα από ένα επίπεδα σκιάς;

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

Γεννήτρια CSS Cubic BezierΣύρετε τις δύο λαβές για να διαμορφώσετε μια καμπύλη κίνησης, δείτε τη σύγκριση με μια σταθερή κίνηση και αντιγράψτε την τιμή cubic-bezier().Γεννήτρια διαβαθμίσεων (Gradient)Δημιουργήστε μια γραμμική, ακτινωτή ή κωνική διαβάθμιση, προσθέστε σημεία χρώματος, ορίστε την κατεύθυνση και αντιγράψτε το CSS με ένα κλικ.Γεννήτρια Border RadiusΣτρογγυλέψτε κάθε γωνία με ρυθμιστικά, δημιουργήστε οργανικά σχήματα με την ελλειπτική λειτουργία και αντιγράψτε το CSS αμέσως.Γεννήτρια FlexboxΡυθμίστε έναν περιέκτη flex και τα στοιχεία του με οπτικά χειριστήρια, δείτε τη διάταξη να αντιδρά ζωντανά και αντιγράψτε το CSS με ένα κλικ.Γεννήτρια CSS GridΟρίστε τις στήλες και τις σειρές σας, σύρετε το ποντίκι στα κελιά για να τοποθετήσετε στοιχεία και αντιγράψτε το CSS και το HTML με ένα κλικ.Υπολογιστής CSS clamp()Εισαγάγετε ένα μέγεθος για μικρές και μεγάλες οθόνες και λάβετε μια ρευστή τιμή clamp() που κλιμακώνεται ομαλά ενδιάμεσα — για γραμματοσειρές, padding, περιθώρια ή κενά.Μετατροπέας χρωμάτωνΜετατρέψτε χρώματα μεταξύ HEX, RGB, HSL, HSV, CMYK και LAB — επεξεργαστείτε οποιοδήποτε πεδίο και τα υπόλοιπα ενημερώνονται αυτόματα.Εργαλείο μορφοποίησης & ελαχιστοποίησης CSSΔιορθώστε τις εσοχές σε ακατάστατο CSS για εύκολη ανάγνωση ή ελαχιστοποιήστε το για γρήγορη φόρτωση — με μια ασφαλή λειτουργία που δεν αλλάζει ποτέ τη σειρά των κανόνων σας.Έλεγχος αντίθεσης χρωμάτωνΕισαγάγετε ένα χρώμα κειμένου και φόντου για να δείτε την αναλογία αντίθεσης WCAG και ποια επίπεδα AA και AAA ικανοποιούνται.