Lägga till skuggor för djup

Box-skuggor kan användas för att skapa en visuell effekt där ett element ser ut att sväva ovanför bakgrunden. Denna effekt kan ge 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 anger skuggans horisontella position, 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 anger skuggans vertikala position, där ett positivt värde flyttar skuggan nedåt och ett negativt värde flyttar den uppåt;
• blur-radius bestämmer 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 och ökar eller minskar skuggans storlek beroende på om värdet är positivt eller negativt;
• color anger skuggans färg med valfritt giltigt färgformat och är också ett valfritt värde.

Förutom box-shadow kan egenskaperna text-shadow och drop-shadow användas för 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.