CSS box-shadow generator
Werkt op je apparaat. Er wordt niets verstuurd.Alles draait in je browser - er wordt niets verstuurd.
Begin met
Lagen
Horizontale verschuiving
Verticale verschuiving
Vervaging
Spreiding
Kleur
Code
CSS
box-shadow:
0 10px 15px -3px rgb(15 23 42 / 0.1),
0 4px 6px -4px rgb(15 23 42 / 0.1);Tailwind CSS
shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]Bestaande schaduw bewerken
Ontwerp CSS-schaduwen met lagen, inset en zachte presets, zie ze live en kopieer de CSS of een Tailwind-klasse. Plak een bestaande schaduw om die te bewerken.
Bouw de schaduw die je wilt op het oog in plaats van getallen te gokken. Begin met een preset - zacht, gemiddeld, hard retro, zacht gelaagd, zwevend, binnen, neumorfisch of gloed - en verfijn dan per laag de verschuiving, vervaging, spreiding, kleur, dekking en inset, terwijl het voorbeeld meebeweegt. Een schaduw kan tot acht lagen hebben; zo maak je de meest natuurlijke schaduwen. Kopieer het resultaat als CSS of als Tailwind-klasse, deel het als link, of plak een box-shadow uit je stylesheet om ermee verder te gaan.
Veelgestelde vragen
Wat doen vervaging en spreiding?
Vervaging maakt de rand van de schaduw zacht: 0 is een harde lijn, hogere waarden laten hem over meer pixels uitlopen. Spreiding maakt de schaduw groter (positief) of kleiner (negatief) vóór het vervagen - een kleine negatieve spreiding met veel vervaging geeft de zachte, ingetrokken schaduwen van moderne interfaces.
Waarom meerdere lagen?
Echte schaduwen zijn donker en scherp vlak bij een voorwerp en lichter en zachter verder weg. Eén laag kan niet allebei; een paar lagen stapelen met verschuiving en vervaging die steeds verdubbelen, zoals de preset Zacht gelaagd, ziet er veel natuurlijker uit.
Wat is een inset-schaduw?
Een inset-schaduw wordt binnen het blok getekend in plaats van erbuiten, zodat het blok ingedrukt lijkt - handig voor invoervelden, verdiepingen en ingedrukte knoppen. Je kunt binnen- en buitenlagen in één schaduw combineren.
Maakt box-shadow een pagina traag?
Een paar schaduwen kosten weinig. Heel grote vervagingen op veel elementen, of box-shadow zelf animeren, kunnen op trage telefoons beelden kosten; animeer liever de dekking van een pseudo-element dat de schaduw al heeft.