Stel met schuifjes een CSS box-shadow samen. Je ziet de schaduw direct in het voorbeeld en kopieert de code met één klik.
Met deze box-shadow generator bouw je visueel een schaduw voor elk HTML-element. Je schuift net zo lang tot het er goed uitziet en kopieert daarna de kant-en-klare CSS-regel. Handig voor kaarten, knoppen, afbeeldingen en zo'n beetje elk blok dat wat diepte kan gebruiken. Alles gebeurt in je browser, dus het resultaat zie je meteen.
De blokkleur en achtergrondkleur zijn er alleen om het voorbeeld op je eigen ontwerp te laten lijken. Ze komen niet in de gekopieerde code terecht, die bevat alleen de box-shadow regel.
De waarde bestaat uit maximaal vier lengtes, een kleur en optioneel het woord inset. De gebruikelijke volgorde is:
Alleen de x- en y-afstand zijn verplicht. Laat je blur of spread weg, dan rekent de browser met 0, en zonder kleur gebruikt de browser de tekstkleur van het element (currentColor). Voorbeeld: box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.2); geeft een zachte schaduw die 8 pixels naar beneden valt.
Nee. De blur-waarde moet 0 of hoger zijn; met een negatieve blur is de hele regel ongeldig en tekent de browser geen schaduw. De spreiding mag wel negatief zijn, daarmee maak je de schaduw juist kleiner dan het element zelf.
Ja. Zet meerdere waarden achter elkaar, gescheiden door komma's: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);. De eerste schaduw in de lijst ligt bovenop, de volgende eronder. Gelaagde schaduwen ogen vaak realistischer dan één grote.
Nee. Alle moderne browsers ondersteunen box-shadow al jaren zonder prefix. Varianten zoals -webkit-box-shadow waren alleen nodig voor erg oude browserversies en kun je gerust weglaten.
JaHandig