Συνάρτηση drop-shadow

Η συνάρτηση drop-shadow επιτρέπει την προσθήκη σκιάς στην εικόνα φόντου.

Σύνταξη

επιλογέας {
	filter: drop-shadow(μετατόπιση x, μετατόπιση y, ακτίνα θόλωσης, χρώμα);
}

Τιμές

Τιμή	Περιγραφή
μετατόπιση x	Μετατόπιση της σκιάς οριζόντια σε σχέση με το φόντο. Ο θετικός αριθμός δηλώνει μετατόπιση της σκιάς προς τα δεξιά, ο αρνητικός - προς τα αριστερά. Υποχρεωτική παράμετρος.
μετατόπιση y	Μετατόπιση της σκιάς κατακόρυφα σε σχέση με το φόντο. Ο θετικός αριθμός δηλώνει μετατόπιση της σκιάς προς τα κάτω, ο αρνητικός - προς τα πάνω. Υποχρεωτική παράμετρος.
θόλωση	Ορίζει την ακτίνα θόλωσης της σκιάς. Όσο μεγαλύτερη είναι η τιμή, τόσο περισσότερο θολώνει η σκιά. Προαιρετική παράμετρος. Από προεπιλογή ίση με `0`.
χρώμα	Χρώμα της σκιάς. Προαιρετική παράμετρος. Από προεπιλογή ορίζεται μαύρο χρώμα σκιάς.

Παράδειγμα

Ας ορίσουμε για την εικόνα μας μια γαλάζια σκιά χωρίς μετατόπιση στους άξονες, με θόλωση 5px:

<div id="elem"></div>

#elem {
	filter: drop-shadow(0 0 5px #035470);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Δείτε επίσης

συνάρτηση blur,
που θολώνει το φόντο
συνάρτηση brightness,
που ορίζει τη φωτεινότητα του φόντου
συνάρτηση contrast,
που ορίζει την αντίθεση του φόντου
συνάρτηση hue-rotate,
που ορίζει την απόχρωση του φόντου
συνάρτηση invert,
που αντιστρέφει τα χρώματα του φόντου
συνάρτηση opacity,
που ορίζει τη διαφάνεια του φόντου
συνάρτηση sepia,
που μετατρέπει το φόντο σε σέπια
ιδιότητα background,
που αποτελεί συντόμευση για το φόντο
ιδιότητα background-image,
με την οποία μπορεί να οριστεί εικόνα φόντου σε ένα μπλοκ