Online CSS box-shadow Generator

CSS Box Shadow

Over CSS Box Shadow

Met de CSS3-box-shadow eigenschap kun je diepte toevoegen aan het ontwerp van je website zonder dat er afbeeldingen of extra containerelementen nodig zijn. Hoewel de syntaxis gemakkelijk te begrijpen is, is het moeilijk om de stijl te visualiseren met alleen code. Met de handige online schaduwtool hierboven kun je eenvoudig een css schaduw maken door snel de css code aan te passen en het schaduw effect zien. Daarbij kun je ook de achtergrondkleur en boxkleur van het voorbeeld blok veranderen zodat je ook met lichte schaduwkleuren kunt werken.
 

Hoe kun je een schaduw maken met de box-shadow CSS syntaxis?

De eerste vier waardes in de box shadow css code worden aangegeven in pixels:

1. afstand in de x (horizontale) richting naar links of rechts.
2. afstand in de y (verticale) richting naar boven of beneden.
3. vervaging (blur).
4. spreiding. (spread) Dit is in wezen de afstand die de schaduw aflegt voordat deze begint te vervagen. Door de spreiding te vergroten, breidt deze zich in alle richtingen uit.

Hierna zie je twee waardes die de kleur en doorzichtigheid ervan bepalen:

1. transparantie #00000080
2. kleur #00000080

Vervolgens is er nog één instelling met de naam 'Schaduw binnen'. Deze instelling voegt 'inset' toe aan de code waardoor je een schaduw kunt maken die aan de binnenkant van het element valt.
 

Kan ik meer effecten maken met de box-shadow CSS?

Ja, je kunt bijvoorbeeld een schaduw maken met inset en één zonder inset tegelijkertijd.
Probeer de volgende code maar eens:
box-shadow: 0px 0px 5px 5px #00000080 inset, 0px 0px 5px 5px #00000080;

Meer informatie over CSS Box Shadow (Engels)