Lägga till skuggor för djup

Vi kan använda box-skuggor för att skapa en visuell effekt där ett element ser ut att sväva ovanför bakgrunden. Denna effekt kan skapa djup, framhäva specifika element och tillföra visuell intresse till en webbsida. För att uppnå detta kan vi använda egenskapen box-shadow.

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;

• offset-x avser den horisontella positioneringen av skuggan, där ett positivt värde flyttar skuggan till höger om elementet och ett negativt värde flyttar den till vänster;
• offset-y avser den vertikala positioneringen av skuggan, där ett positivt värde flyttar skuggan nedåt och ett negativt värde flyttar den uppåt;
• blur-radius anger graden av oskärpa för skuggan och är ett valfritt värde, där ett högre värde ger en mer suddig skugga;
• spread-radius är också valfritt, ökar eller minskar storleken på skuggan beroende på om värdet är positivt eller negativt;
• color specificerar skuggans färg med valfritt giltigt färgformat och är också ett valfritt värde.

Förutom box-shadow gör egenskaperna text-shadow och drop-shadow det möjligt att skapa skuggor för text respektive andra element. De fungerar på samma sätt som egenskapen box-shadow. Dessa egenskaper används dock mer sällan jämfört med box-shadow.