Schaduw-box
Ontwerp CSS box-shadow-effecten visueel. Pas offsets, vervaging, spreiding en kleur aan met schuifregelaars. Kopieer de CSS-code met een klik.
Belangrijkste functies
- Intuïtieve besturing voor horizontale en verticale verschuiving
- Schuiven voor vervagings- en spreidingsradius
- Zowel binnenste (inset) als buitenste schaduw ondersteund
- Kopieer de volledige CSS-code met alle benodigde opmaak
Guide
CSS box-shadow is een van die eigenschappen die simpel lijkt in de documentatie maar lastig wordt zodra je iets specifieks probeert te maken. Hoeveel vervaging maakt het natuurlijk? Welke spreidingswaarde geeft een strak randeffect versus een zachte gloed? Moet de schaduw naar binnen of naar buiten gaan? Blindelings nummers aanpassen in je code en steeds de pagina vernieuwen is niemands idee van plezier. De gratis box-shadow-generator van WebRecast geeft je visuele bediening voor elke parameter. Schuif de horizontale en verticale offsets om je schaduw te positioneren. Pas de vervagingsradius aan voor zachtheid en spreiding voor grootte. Kies elke schaduwkleur, stel de dekking in en schakel tussen externe en inset-schaduwen. Je ziet het resultaat live bijwerken terwijl je elke schuifregelaar versleept, wat het gemakkelijk maakt om precies het effect te krijgen dat je wilt. Wanneer je tevreden bent met het uiterlijk, kopieer de volledige CSS-code - netjes geformatteerd en klaar om in je stylesheet te plakken. De tool ondersteunt ook het stapelen van meerdere schaduwen, wat de manier is waarop je die rijke, realistische diepte-effecten maakt die je ziet op moderne kaartontwerpen. Als je CSSmatic's box-shadow-tool, Box-Shadow.dev of Neumorphism.io hebt gebruikt, ken je het concept. Deze box-shadow-generator zet alle bediening in één overzichtelijke interface. Een praktische tip: gebruik voor kaartelementen een subtiele schaduw met ongeveer 10-20px vervaging, weinig spreiding en een semi-transparant zwart of grijs. Het tilt de kaart van de pagina zonder dramatisch te lijken. Voor knoppen creëert een kleinere schaduw met 4-8px vervaging een prettig klikbaar gevoel. Deze gratis online box-shadow-tool draait in je browser zonder iets te installeren. Ontwerp je schaduw, kopieer de CSS, plak het in je project. Visueel, snel en volledig gratis.
Veelgestelde vragen
Kan ik meerdere schaduwen stapelen?
Ja! Je kunt meerdere schaduvlagen definiëren en ik formatteer ze als één enkele CSS-string.
Werkt het ook voor text-shadow?
Deze tool richt zich op box-shadow. Je kunt vergelijkbare waarden toepassen op text-shadow in je CSS.
