Kaderschaduw genereren
Genereer CSS-eigenschappen voor box-shadow
Schaduwlagen
Schaduw 1
Vooraf ingestelde schaduwen
Schaduwtips
Positieve offsetwaarden verplaatsen schaduwen omlaag en naar rechts, negatieve waarden omhoog en naar links.
De vervagingsstraal bepaalt hoe zacht de schaduw is; hogere waarden geven diffusere schaduwen.
De spreidingsstraal vergroot of verkleint de schaduw.
Binnenschaduwen geven een inwendige schaduw voor diepte-effecten.
Meerdere schaduwen kunnen over elkaar worden gelegd voor complexe lichteffecten.
Lagere dekkingswaarden geven subtielere, realistischere schaduwen.
Live voorbeeld
Voorbeeldschaal: 100%
CSS-declaratie
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);CSS-klasse
.shadow {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}Tailwind CSS (bij benadering)
shadowDit is een stijlsuggestie. Aangepaste offsets, kleuren, binnenschaduwen en meerdere lagen vereisen de gegenereerde CSS.
Pas een laag aan of probeer een voorinstelling. Het voorbeeld wordt bijgewerkt terwijl u werkt.
Over Kaderschaduw genereren
Onze gratis CSS box-shadow generator helpt u professionele schaduweffecten te maken met volledige visuele controle. Pas verschuiving, vervagingsstraal, spreidingsstraal, kleur en dekking aan met overzichtelijke schuifregelaars en zie het resultaat direct in realtime veranderen. Stapel meerdere schaduwen voor complexe diepte-effecten waarmee uw interface-elementen opvallen.
Schaduwen zijn onmisbaar om visuele hiërarchie en diepte te creëren in moderne webinterfaces. Een goed gekozen box-shadow laat kaarten boven de pagina zweven, geeft knoppen een interactieve uitstraling en laat navigatie-elementen uit de achtergrond naar voren komen. Deze tool bespaart u het uitproberen bij het met de hand schrijven van box-shadow-waarden.
De generator ondersteunt zowel buitenste als inset-schaduwen, meerdere schaduwlagen en bevat 6 voorinstellingen voor veelgebruikte schaduwstijlen. De uitvoer is CSS-code met een kopieerknop voor met één klik kopiëren, samen met bij benadering Tailwind CSS-utilityklassen als suggestie. Alles gebeurt in uw browser en er worden geen gegevens naar een server gestuurd.
Belangrijkste functies
- Meerdere schaduwlagen die u kunt toevoegen, verwijderen en afzonderlijk instellen
- Nauwkeurige schuifregelaars voor X-verschuiving, Y-verschuiving, vervagingsstraal en spreidingsstraal
- Kleurkiezer met hex-invoer en instelbare dekking voor elke schaduwlaag
- Inset-schakelaar voor binnenste diepte en reliëfeffecten
- 6 voorinstellingen voor schaduwen: Subtiel, Middel, Groot, Extra groot, Binnen en Meervoudig
- Willekeurige schaduwgenerator om creatieve schaduwcombinaties te ontdekken
- Live voorbeeld in realtime met instelbare elementkleur
- Met één klik naar het klembord kopiëren met schone CSS-uitvoer
- Uitvoer in alternatieve formaten, waaronder een CSS-klasse en een bij benadering bepaalde Tailwind CSS-utility
- Volledige ondersteuning voor donkere modus voor prettig bewerken bij elke lichtsterkte
Zo gebruikt u Kaderschaduw genereren
- Voeg schaduwlagen toe: Begin met de standaardschaduw of klik op Toevoegen om extra schaduwlagen voor complexe effecten te maken.
- Pas de schaduweigenschappen aan: Stel met de schuifregelaars de X/Y-verschuiving, vervagingsstraal, spreidingsstraal, kleur en dekking van elke schaduwlaag in.
- Schakel inset in: Vink het selectievakje Inset aan bij een schaduwlaag om een binnenschaduw te maken in plaats van een buitenschaduw.
- Bekijk het resultaat: Bekijk het live voorbeeldelement om precies te zien hoe uw schaduw eruitziet. Wijzig zo nodig de kleur van het voorbeeldelement.
- Probeer de voorinstellingen: Klik op een van de 6 voorinstellingen om snel een veelgebruikte schaduwstijl als beginpunt toe te passen.
- Kopieer de CSS: Klik op de knop Kopiëren om de volledige box-shadow-CSS-declaratie naar uw klembord te kopiëren.
Toepassingen
- Verhoogde kaarten: Geef kaartcomponenten diepte, zodat ze boven de paginaachtergrond lijken te zweven.
- Hover-status van knoppen: Maak schaduwovergangen voor knoppen die visueel op gebruikersinteractie reageren.
- Opmaak van modals en dialoogvensters: Geef modals en dialoogvensters grote, zachte schaduwen voor een duidelijke scheiding van de achtergrond.
- Navigatiemenu's: Geef keuzemenu's en popovers schaduwen die gelaagdheid en diepte overbrengen.
- Focuseffecten bij invoer: Gebruik gekleurde schaduwen als focusindicatoren voor invoervelden en interactieve elementen.
- Inset-effecten: Maak een ingedrukte of reliëfachtige uitstraling voor schakelknoppen, actieve statussen en decoratieve elementen.
- Neumorfisme: Combineer meerdere lichte en donkere schaduwen voor de populaire zachte UI-esthetiek.
- Afbeeldingen omlijsten: Voeg subtiele schaduwen toe aan afbeeldingen en mediacontainers voor een verzorgde galerij-uitstraling.
Veelgestelde vragen
Is deze tool gratis?
Ja, Kaderschaduw genereren is volledig gratis, zonder limiet op het aantal schaduwen dat u kunt maken. Registratie of betaling is niet nodig.
Zijn mijn gegevens veilig?
Het genereren en bekijken van schaduwen gebeurt volledig in uw browser. Er worden geen gegevens naar een externe server gestuurd, dus uw instellingen en CSS-uitvoer blijven helemaal privé.
Wat is het verschil tussen vervagingsstraal en spreidingsstraal?
De vervagingsstraal bepaalt hoe zacht of diffuus de schaduw eruitziet: hogere waarden geven een geleidelijkere overgang. De spreidingsstraal vergroot (positieve waarden) of verkleint (negatieve waarden) de schaduw ten opzichte van het element.
Kan ik meerdere schaduwen op één element gebruiken?
Ja, CSS ondersteunt meerdere box-shadows gescheiden door komma's. Met deze tool voegt u meerdere schaduwlagen toe, die automatisch worden gecombineerd tot één box-shadow-declaratie.
Wat is een inset-schaduw?
Een inset-schaduw wordt binnen het element getekend in plaats van erbuiten, waardoor het element ingedeukt of ingedrukt lijkt. Dit wordt vaak gebruikt voor invoervelden, actieve knopstatussen en neumorfische ontwerpen.
Wordt box-shadow in alle browsers ondersteund?
Ja, de eigenschap box-shadow wordt volledig ondersteund in alle moderne browsers, waaronder Chrome, Firefox, Safari, Edge en Opera. Voorvoegsels per browser zijn niet nodig.
Tips & best practices
- Houd schaduwen subtiel: Een lage dekking (5-15%) en matige vervaging geven realistische, professionele schaduwen die het ontwerp niet overheersen.
- Gebruik negatieve spreiding: Een kleine negatieve spreidingsstraal laat schaduwen strakker en gerichter onder het element vallen.
- Stapel meerdere schaduwen: Combineer een strakke, donkere schaduw met een bredere, lichtere voor een natuurlijke diepte die op echt licht lijkt.
- Houd één lichtbron aan: Gebruik overal in uw ontwerp dezelfde verschuivingsrichting om één samenhangende lichtbron na te bootsen.
- Denk aan prestaties: Grote vervagingswaarden op veel elementen kunnen de weergaveprestaties verminderen, vooral op mobiele apparaten.
- Gebruik schaduwen voor hiërarchie: Een hogere elevatie (grotere verschuiving en vervaging) hoort bij elementen die in de visuele stapel dichter bij de gebruiker liggen.