Zo gebruik je deze tool
- Begin met een voorinstelling of pas de verschuiving, vervaging, spreiding, kleur en dekking van de eerste laag aan.
- Voeg lagen toe voor een natuurlijker diepte-effect, of vink “Inset” aan voor een binnenschaduw.
- Pas de achtergrond van het voorbeeld en de kleur van het kader aan uw ontwerp aan en kopieer daarna de CSS.
Hoe het werkt
box-shadow gebruikt per laag: horizontale verschuiving, verticale verschuiving, vervagingsradius, spreidingsradius en kleur, eventueel voorafgegaan door inset. Positieve verschuivingen verplaatsen de schaduw naar rechts en omlaag. Vervaging verzacht de rand en kan niet negatief zijn; spreiding vergroot (positief) of verkleint (negatief) de schaduw voordat deze wordt vervaagd. Meerdere lagen worden gescheiden door komma's en de eerste laag wordt bovenop getekend.
Een realistisch hoogte-effect combineert meestal een kleine, scherpe schaduw met een grotere, zachtere schaduw met lage dekking. Dat doet de voorinstelling “Verhoogd”. Kleuren worden geschreven als rgba(), zodat de dekking expliciet is. Schaduwen volgen de border-radius van het element en nemen geen ruimte in de lay-out in, waardoor andere elementen nooit verschuiven.
Schaduwen met een zeer grote vervagingsradius op veel elementen kunnen het scrollen vertragen op eenvoudige telefoons. Als u een schaduw animeert, verloopt het meestal vloeiender om een pseudo-element met de schaduw geleidelijk zichtbaar te maken dan om box-shadow zelf te animeren.
Voorbeelden
Kaart op een lichte pagina
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); geeft een kaart een scherpe rand en een zacht verhoogd effect.
Focusring zonder verschuiving in de lay-out
Een laag met een verschuiving van 0, een vervaging van 0 en een spreiding van 3px in uw merkkleur vormt een stevige ring rond een knop. Anders dan een rand verandert deze de grootte van het element niet.
Ingedrukt invoerveld
inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) laat een tekstveld er iets verdiept uitzien.
Veelgestelde vragen
Wat is het verschil tussen box-shadow en filter: drop-shadow()?
box-shadow volgt het kader en de border-radius van het element en ondersteunt spreiding en inset. drop-shadow() volgt de zichtbare vorm, inclusief transparante delen van PNG- of SVG-afbeeldingen, maar heeft geen spreiding of inset.
Waarom wordt mijn schaduw afgesneden?
Een bovenliggend element met overflow: hidden snijdt alles buiten het kader af, ook schaduwen. Voeg padding toe aan het bovenliggende element of verwijder de overflow-regel.
Hoeveel lagen kan ik het beste gebruiken?
Voor de meeste interfaces zijn één of twee lagen voldoende. Meer lagen kunnen de schaduw vloeiender maken, maar kosten iets meer tijd om te tekenen. Dat kan van belang zijn bij lange lijsten.
Privacy
De CSS wordt in uw browser gegenereerd. Er wordt niets geüpload of opgeslagen.