Μετάβαση στο περιεχόμενο

Γεννήτρια Σκιάς CSS

Δημιουργήστε CSS box-shadow οπτικά με ζωντανή προεπισκόπηση. Ρυθμίστε μετατόπιση, θόλωση, εξάπλωση, χρώμα και αδιαφάνεια. Αντιγράψτε τον κώδικα CSS. Δωρεάν, 100% στο πρόγραμμα περιήγησης.

Προεπισκόπηση

Κώδικας CSS

 

Τι είναι το CSS box-shadow;

Η ιδιότητα CSS box-shadow προσθέτει ένα ή περισσότερα εφέ σκιάς γύρω από το πλαίσιο ενός στοιχείου.

Σύνταξη box-shadow

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;

Χρήση πολλαπλών επιπέδων σκιάς

Ο συνδυασμός πολλαπλών σκιών δημιουργεί ρεαλιστικά εφέ βάθους.

Συμβουλές σχεδιασμού για σκιές

Χρησιμοποιήστε χρώματα rgba() ή hsla() — οι ημιδιαφανείς σκιές φαίνονται πιο φυσικές.

Απόρρητο

Όλη η δημιουργία σκιών εκτελείται 100% στο πρόγραμμα περιήγησής σας.