box-shadow CSS özelliği, HTML elementlerine gölge eklemek için kullanılır. Bu özellik sayesinde kullanıcı arayüzlerinde derinlik ve görsel ilgi katmanları oluşturulabilir. box-shadow kullanırken belirtilen dört ana parametre vardır:

Yatay konum (horizontal offset): Gölgenin yatay olarak ne kadar uzakta olacağını belirtir. Pozitif değerler gölgeyi sağa, negatif değerler sola taşır.

Dikey konum (vertical offset): Gölgenin dikey olarak ne kadar uzakta olacağını belirtir. Pozitif değerler gölgeyi aşağı, negatif değerler yukarı taşır.

Bulanıklık yarıçapı (blur radius): Gölgenin ne kadar bulanık olacağını belirtir. Değer arttıkça, gölge daha çok yayılır ve daha yumuşak bir geçişe sahip olur. Eğer bu değer 0 ise, gölge keskin bir kenara sahip olur.

Yayılma yarıçapı (spread radius): Gölgenin boyutunu ayarlar. Pozitif değerler gölgeyi genişletirken, negatif değerler küçültür.

Renk: Gölgenin rengini belirtir. Renk, hex, rgb, rgba gibi CSS renk formatlarında olabilir.

Ayrıca, box-shadow birden fazla gölge eklemek için virgülle ayrılmış değerler kullanabilirsiniz. İşte bazı örnek kullanımlar:

Basit bir gölge: box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);

Gölgeyi sola ve yukarı taşıma: box-shadow: -5px -5px 5px 0px rgba(0,0,0,0.5);

Keskin kenarlı gölge: box-shadow: 10px 10px 0 0 rgba(0,0,0,1);

Çoklu gölgeler: box-shadow: 3px 3px 5px 0 rgba(0,0,0,0.5), -1px -1px 5px 0 rgba(255,255,255,0.5);

box-shadow özelliği, elementlere uygulanan diğer stillerle birlikte kullanıldığında, kullanıcı arayüzlerinin daha etkileyici ve derinlikli görünmesini sağlar.