Een CSS-vakschaduw genereren
Gebruik deze pagina voor één buiten- of binnenschaduw. Hij maakt een standaard box-shadow-waarde in dezelfde volgorde als de browser die interpreteert.
- Voer horizontale en verticale verschuiving in.
- Stel een niet-negatieve vervagingsstraal en positieve, nul- of negatieve spreidingsafstand in.
- Voer HEX-kleur en dekking van de schaduw in.
- Kies Buiten of Binnen.
- Genereer, controleer het testvak en kopieer de CSS-declaratie.
Hoe de vier lengtes werken
De eerste lengte is de horizontale verschuiving, de tweede verticaal. Positief verplaatst rechts en omlaag; negatief links en omhoog. De derde is de vervagingsstraal en mag niet negatief zijn. Nul geeft een scherpe rand, groter een bredere zachte overgang. De vierde is spreiding: positief vergroot de schaduwvorm, negatief verkleint.
Buiten- en binnenschaduwen
Een buitenschaduw wordt achter het kadervak getekend en verandert de documentopmaak niet. Hij kan naastgelegen inhoud overlappen; daarom reserveert het voorbeeld ruimte voor het maximale bereik. inset maakt een binnenschaduw die binnen het vak wordt afgeknipt. Dezelfde verschuivingen verplaatsen dan de binnenschaduw in het voorbeeld.
Kleur, dekking en gekopieerde CSS
De kleur is een ondoorzichtige HEX-invoer met aparte dekking van 0 tot 1. Dekking 1 wordt genormaliseerde HEX met zes cijfers; lager wordt rgba(red, green, blue, alpha). Het resultaat toont de exacte waarde op het testvak. Een veld wijzigen of wissen verwijdert het oude voorbeeld en schakelt Kopiëren uit tot nieuwe waarden geldig zijn.
Bereik en zorgvuldige interpretatie
- Slechts één schaduwlaag; geen kommagescheiden stapel.
- Vervaging van 0–200px, verschuiving en spreiding van −200–200px.
- Geen volledige componentontwerper, achtergrondeditor, animatie, afbeeldingsexport of ontwerpgarantie.
- Grote schaduwen kunnen overlappen omdat box-shadow de opmaak niet beïnvloedt; controleer de echte component met de werkelijke ruimte en afknipping.
Voorbeelden
12px 12px 24px 0px rgba(0, 0, 0, 0.3) geeft een zachte buitenschaduw naar rechtsonder.
inset 0px 4px 8px -2px rgba(17, 34, 51, 0.5) geeft een verkleinde binnenschaduw.
Veelgestelde vragen
Mag vervaging negatief zijn?
Nee. CSS definieert de vervagingsstraal als niet-negatief, dus de generator wijst negatieve vervaging af.
Mag spreiding negatief zijn?
Ja. Negatieve spreiding verkleint de schaduwvorm en blijft behouden.
Waarom verplaatst een grote schaduw omliggende inhoud niet?
Vakschaduwen zijn visuele effecten en doen niet mee aan de opmaak.
Kan ik meerdere lagen maken?
Niet op deze gerichte pagina. Hij genereert bewust één schaduw.