CSS box-shadow voorbeelden: 40 schaduwen om te kopiëren
CSS box-shadow voorbeelden
CSS box-shadow voorbeelden: 40 schaduwen om te kopiëren als CSS of Tailwind
40 originele box-shadow-voorbeelden die u kunt bekijken en kopiëren als CSS of als Tailwind-class: zacht, gelaagd, alleen onder, inset, gekleurd, dark mode en een elevatieschaal.
Een box shadow schrijft u als box-shadow: x-offset y-offset blur spread color, met een optioneel inset-sleutelwoord. Zachte, realistische schaduwen stapelen meestal twee of drie lagen met een lage opacity, en een schaduw alleen aan de onderkant gebruikt een positieve y-offset met een negatieve spread. Kies een van de 40 voorbeelden hieronder en kopieer hem als CSS of Tailwind.
De vijf onderdelen van een box-shadow-waarde
Onderdeel
Voorbeeld
Wat het doet
x-offset
Verschuift de schaduw naar rechts (positief) of links (negatief)
y-offset
Verschuift de schaduw naar beneden (positief) of omhoog (negatief)
blur-radius
Verzacht de rand; kan niet negatief zijn; 0 geeft een harde rand
spread-radius
-6px
Vergroot (positief) of verkleint (negatief) de schaduw vóór het vervagen
rgb(0 0 0 / 0.15)
Valt terug op de tekstkleur van het element als u hem weglaat
Tekent de schaduw binnen de rand in plaats van erbuiten
De meeste lijstjes met schaduwen geven u een plaatje en een regel CSS. Deze legt ook uit waarom een schaduw echt of nep oogt, geeft u een bijpassende elevatieschaal die u in een design system kunt zetten, en laat zien hoe u schaduwen zichtbaar houdt op donkere achtergronden. Elk voorbeeld is origineel en draait live in uw browser.
Filter de galerij op stijl, zoals gelaagd, alleen onder, inset of gekleurd.
Elke kaart toont de schaduw op een echt oppervlak. Zet de achtergrond op donker om te zien hoe hij standhoudt.
Klik op een kaart om hem te kopiëren. Kies met de schakelaar tussen gewone CSS of een Tailwind arbitrary class.
Voor een heel product kopieert u beter de elevatietokens verderop dan losse schaduwen.
Gebruik een negatieve spread met een grotere y-offset om een schaduw onder het element te houden en weg van de zijkanten.
Kleur schaduwen met een donkere versie van de achtergrondtint in plaats van puur zwart, voor een minder modderige look.
Animeer de opacity van een pseudo-element dat de grotere schaduw draagt, in plaats van box-shadow zelf te animeren, als een hover-lift hapert.
box-shadow volgt border-radius, dus afgeronde kaarten krijgen zonder extra werk afgeronde schaduwen.
Veelgestelde vragen
Hoe voeg ik een box shadow alleen aan de onderkant toe?
Geef de schaduw een positieve y-offset en een negatieve spread van ongeveer dezelfde grootte als de blur, bijvoorbeeld box-shadow: 0 8px 6px -6px rgb(0 0 0 / 0.3). De negatieve spread trekt de schaduw in aan de linker-, rechter- en bovenkant, zodat alleen het deel zichtbaar is dat voorbij de onderrand wordt geduwd.
Hoe gebruik ik meer dan één schaduw?
Scheid de schaduwen met komma's. De eerste schaduw in de lijst wordt boven de andere getekend, dus zet de strakke, donkere contactschaduw vooraan en de brede, vage omgevingsschaduw achteraan.
Waarom verdwijnt mijn schaduw op een donkere achtergrond?
Een zwarte schaduw op een bijna zwarte pagina heeft vrijwel geen contrast. Leun in donkere thema's op een lichtere oppervlaktekleur voor verhoogde elementen, voeg een dunne lichte rand of een inset-highlight van 1px toe, en verhoog de opacity van de schaduw in plaats van alleen op de schaduw te vertrouwen.
Wat is het verschil tussen box-shadow en drop-shadow()?
box-shadow volgt de box en de border-radius van het element. filter: drop-shadow() volgt de zichtbare pixels, dus hij sluit nauw aan op transparante PNG's en SVG-vormen, maar hij heeft geen spread-waarde en geen inset-optie.
Hoe schrijf ik een eigen schaduw in Tailwind?
Gebruik een arbitrary value met underscores in plaats van spaties, zoals shadow-[0_8px_24px_-6px_rgb(0_0_0/0.2)]. De ingebouwde schaal loopt van shadow-2xs tot shadow-2xl, en inset-shadow-sm en verwanten dekken binnenschaduwen af.
Waarom gelaagde schaduwen echter ogen
Echte objecten werpen twee soorten schaduw tegelijk: een kleine donkere precies waar ze het oppervlak raken, en een brede bleke door licht dat door de ruimte weerkaatst. Eén vervaagde schaduw probeert beide te zijn en ziet er uiteindelijk uit als een grijze halo.
Twee tot vier lagen stapelen, elk met ongeveer het dubbele van de offset en blur van de vorige en een lagere opacity, bootst die mix na. De kosten zijn klein, maar heel grote blurwaarden op veel elementen kunnen het scrollen op zwakke apparaten vertragen, dus beperk zware schaduwen tot een paar verhoogde oppervlakken.
Schaduwen als schaal, niet als losse gevallen
Producten voelen consistent als elk verhoogd element kiest uit een korte ladder: rustende kaarten, kaarten bij hover, dropdowns, dialogen. Sla elke stap op als custom property en hergebruik die, zodat u later voor een andere lichtrichting maar één plek hoeft aan te passen.
Laat de y-offset sneller groeien dan de x-offset, die op nul blijft bij een lichtbron recht boven. Lichtrichtingen mengen tussen componenten is een van de snelste manieren om een interface eruit te laten zien alsof hij uit losse onderdelen is samengesteld.
Box shadow alleen aan de onderkant
Een negatieve spread verkleint de schaduw aan elke kant, en de y-offset duwt hem vervolgens naar beneden uit. Houd de spread dicht bij min de blur, zodat er niets langs de linker- en rechterrand lekt.
Drie schaduwen alleen aan de onderkant
Van links: een strakke rand, een zachtere val en de dunne lijn die onder sticky headers wordt gebruikt.
Een herbruikbare elevatieschaal
Vijf stappen dekken de meeste interfaces. Elke stap verdubbelt de offset en blur van de vorige en houdt een strakke contactlaag eronder.