CSS-schaduwgenerator
Genereer CSS-schaduwen
Hoe CSS-schaduwgenerator te gebruiken
Genereer CSS-schaduwen Gratis online tool, geen registratie, geen opdringerige advertenties. Gebruik het nu.
Waarvoor dienen CSS-schaduwen?
Schaduwen voegen diepte, hoogte en visuele hiërarchie toe aan interfaces. Google's Material Design, Apple's Human Interface Guidelines en de meeste moderne ontwerpsystemen gebruiken schaduwen systematisch om over te brengen welke elementen dichter bij de gebruiker zijn — een gevoel van driedimensionale diepte creërend in vlakke interfaces.
- Kaartverhoging: Een subtiele schaduw op een kaartcomponent heft het op van de achtergrond, wat aangeeft dat het een interactieve of zelfstandige inhoudseenheid is. Diepere schaduwen duiden op grotere hoogte — zoals de Floating Action Buttons (FAB) in Google's Material Design.
- Schaduwen van modals en dropdowns: Overlays (modals, dropdownmenu's, tooltips) gebruiken sterke schaduwen om aan te geven dat ze boven de pagina-inhoud zweven — een duidelijke visuele dieptehiërarchie creërend.
- Focusindicatoren: Box-shadows kunnen outlines vervangen voor focustoestanden:
box-shadow: 0 0 0 3px rgba(123,53,245,0.4)maakt een zichtbare focusring zonder de lay-out te beïnvloeden — een veelgebruikte techniek in toegankelijke ontwerpsystemen, conform WCAG 2.4.11. - Tekstleesbaarheid: Een subtiele text-shadow op witte tekst boven een afbeelding garandeert leesbaarheid ongeacht de afbeeldingsinhoud erachter — zonder een solide kleuroverlay nodig te hebben die de afbeelding zou bedekken.
- Neomorfisme: De neomorfische ontwerpstijl gebruikt dubbele schaduwen — een lichte schaduw aan de ene kant en een donkere aan de andere — om een 3D-geëxtrudeerd of ingebed effect te creëren dat uit de achtergrond lijkt te zijn gesneden.
Box-shadow-syntaxis: box-shadow: [inset] offset-x offset-y vervagingsradius spreiding kleur. Meerdere schaduwen kunnen worden gestapeld: box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.05) — een techniek die wordt gebruikt in Google's Material Design voor meerlaagse natuurlijke schaduwen.
Frequently Asked Questions
Wat is het verschil tussen box-shadow en drop-shadow()?
box-shadow wordt toegepast op de rechthoekige doos van het element — het volgt geen onregelmatige vormen zoals PNG-afbeeldingen met transparante achtergrond. De CSS filter-functie drop-shadow() volgt de werkelijk gerenderde vorm, inclusief transparante gebieden. Gebruik drop-shadow() voor pictogrammen en afbeeldingen met transparantie; box-shadow voor rechthoekige elementen zoals kaarten en knoppen.
Wat doet het sleutelwoord 'inset'?
Het sleutelwoord inset zorgt ervoor dat de schaduw van binnenuit het element verschijnt in plaats van van buitenaf. Een inset-schaduw creëert het uiterlijk van een ingedrukt of ingezonken element — handig voor ingedrukte knoeptoestanden, invoervelden (innerdiepteeffect) of neomorfische ingebedde UI-elementen.
Wat is de spreidingsradius in box-shadow?
De vierde waarde in box-shadow is de spreidingsradius — het vergroot of verkleint de schaduw. Een positieve waarde maakt de schaduw groter dan het element; een negatieve waarde maakt het kleiner. offset-x en offset-y op 0 instellen met een positieve spreiding maakt een uniform omlijningseffect/gloed rondom het element.
Waarom ziet mijn schaduw er anders uit in Safari dan in Chrome?
Renderverschillen van schaduwen tussen browsers zijn gewoonlijk te wijten aan sub-pixel-rendering en gammacorrectie. Safari en Chrome gebruiken licht verschillende compositie-algoritmen. Voor consistente cross-browser resultaten, gebruik RGBA-kleuren met expliciete alfawaarden in plaats van opacity, en test schaduwen in beide rendering-engines.
Hoeveel box-shadows kunnen worden gestapeld?
Er is geen strikte limiet — je kunt meerdere box-shadows stapelen met een kommagescheiden lijst. Meerdere gestapelde schaduwen met verschillende vervagingsstralen en opaciteiten creëren schaduwen die er natuurlijker uitzien en de werkelijkewereldbelichting nabootsen. Google's Material Design definieert specifieke meerlaagse schaduwrecepten voor elk hoogtieniveau.
CSS box-shadow vs outline vs border vs filter: drop-shadow()
box-shadow voegt een schaduw toe buiten (of binnen met inset) de doos — beïnvloedt de lay-out niet. outline tekent een lijn buiten de rand — beïnvloedt de lay-out ook niet, gewoonlijk gebruikt voor toegankelijke focusindicatoren. border voegt een lijn toe binnen het element — beïnvloedt de lay-out. filter: drop-shadow() volgt de werkelijk gerenderde vorm van het element, inclusief transparanties. Voor UI-verhoging en -diepte: box-shadow. Voor focusringen: outline of box-shadow. Voor pictogramschaduwen: drop-shadow().