CSS box shadow generator
Vorm een schaduw met schuifregelaars en kopieer de CSS.
Box en achtergrond
Draait in je browser. Niets van wat je typt wordt ergens naartoe gestuurd.
- Stapel tot 8 lagen
- Inset-schaduwen
- 6 kant-en-klare presets
Zo maak je een CSS box shadow
- Begin met een preset, of verplaats de schuifregelaars voor verschuiving, vervaging en spreiding.
- Voeg lagen toe voor een zachtere, natuurlijkere schaduw.
- Kopieer de box-shadow-regel naar je CSS.
Wat elke box-shadow-waarde doet
| Waarde | Betekenis | Gangbaar bereik |
|---|---|---|
| Offset X | Beweegt de schaduw naar rechts, of naar links bij een negatieve waarde | -100 tot 100px |
| Offset Y | Beweegt de schaduw naar beneden, of naar boven bij een negatieve waarde | -100 tot 100px |
| Vervaging | Verzacht de rand; 0 geeft een scherp afgebakende schaduw | 0 tot 200px |
| Spreiding | Laat de schaduw groeien of krimpen voordat hij vervaagd wordt | -100 tot 100px |
| Dekking | Hoe solide de schaduwkleur oogt | 10 tot 30% voor een natuurlijk resultaat |
Startwaarden voor bekende looks
| Preset | Offset Y | Vervaging | Spreiding | Dekking |
|---|---|---|---|---|
| Zacht | 10px | 30px | -5px | 20% |
| Scherp | 6px (ook X) | 0px | 0px | 100% |
| Gloed | 0px | 24px | 4px | 55% |
| Naar binnen | 2px | 6px | 0px | 25% |
Gelaagd en Zwevend bouwen hierop voort door twee of drie schaduwen tegelijk te stapelen, iets wat één laag niet kan nabootsen.
Tips voor natuurlijk ogende schaduwen
- Echt licht werpt zelden een puur zwarte schaduw. Gebruik 10 tot 30 procent dekking en laat de kleur neigen naar de tint van de achtergrond voor een zachter resultaat.
- Stapel 2 of 3 schaduwen: een kleine, strakke dicht bij de box en een grotere, waziger verder naar buiten, zoals de presets Gelaagd en Zwevend zijn opgebouwd.
- Negatieve spreiding met een grote verticale verschuiving geeft het zwevende-kaart-effect dat je vaak ziet in moderne interfaces.
- Een bovenliggend element met overflow: hidden knipt een schaduw net zo af als het content afknipt, voeg dus liever padding toe aan het bovenliggende element dan overal overflow te verwijderen.
Veelgestelde vragen over Box shadow generator
Wat betekenen de box-shadow-waarden?
In volgorde: horizontale verschuiving, verticale verschuiving, vervagingsradius, spreidingsradius en kleur. Positieve verschuivingen bewegen de schaduw naar rechts en naar beneden, en het trefwoord inset tekent hem binnen de box.
Hoe maak ik een schaduw die er natuurlijk uitziet?
Stapel twee of drie zachte schaduwen met lage dekking: een kleine, strakke dicht bij de box en een grotere, waziger verder naar buiten. Echte schaduwen zijn zelden puur zwart op volle sterkte.
Wat doet spreiding?
Spreiding laat de schaduw groeien of krimpen voordat hij vervaagd wordt. Een negatieve spreiding met een grote verticale verschuiving geeft het zwevende-kaart-effect.
Waarom wordt mijn schaduw afgesneden?
Een bovenliggend element met overflow: hidden knipt alles af dat buiten zijn box wordt getekend, schaduwen inbegrepen. Voeg padding toe aan het bovenliggende element of verwijder de overflow-instelling.
Hoeveel schaduwlagen kan ik stapelen?
Tot 8 op deze pagina. CSS zelf kent geen vaste limiet voor box-shadow-lagen, maar meer dan 3 of 4 oogt zelden anders en kost meer om te tekenen.
Verandert een box shadow de grootte of ruimte van een element?
Nee. Een box-shadow is puur visueel en heeft nooit invloed op de layout, in tegenstelling tot een border of outline, dus naburige elementen verschuiven nooit als je er een toevoegt of aanpast.