Beste gratis CSS Box Shadow Generator
Visueel CSS-box-schaduw bouwen met live preview, inset en een tweede laag.Kopieer de code.
100% vrij
Geen aanmelding
Geen watermerk
✨
Ga Pro voor de beste AI modellen.. image, video en chat.. plus grotere uploads, prioriteit in de wachtrij en geen wachten.
Upgrade naar Pro
Liefde Best.Free? Deel het
Hoe het werkt
- Schuifregelaars verplaatsen. Zet offset, vervaging, spreiding, kleur en dekking; schakel inschakelen als u een binnenschaduw wilt.
- Bekijk het voorbeeld. De live box updates als je sleept; voeg een tweede laag in Geavanceerde opties voor diepte.
- Kopiëren van het CSS. Druk op CSS kopiëren en plak de box-schaduw regel recht in je stylesheet.
Info over dit hulpprogramma
Ontwerp een box-schaduw zonder pixelwaarden te raden. Sleep de offset-X, offset-Y, vervaging en spread sliders, kies een schaduwkleur en kies in de dekking, en bekijk een live previewbox update in real time. Kopieer dan de exacte doos-schaduw CSS. Schakel de inset aan/uit voor een binnenschaduw. De geavanceerde opties stapelen een tweede schaduwlaag, zodat u de zachte, meerlaagse schaduwen kunt bouwen die worden gebruikt op moderne kaarten en knoppen. Alles draait in uw browser.
Waarvoor gebruiken mensen het?
- Een zachte slagschaduw toevoegen aan kaarten en modals
- Maak een innerlijke schaduw voor ingangen en putten
- Stack twee lagen voor een realistische, diffuse schaduw
- Stel offset en vervaging af om een ontwerpmodel te maken
Veelgestelde vragen
Offset-X/Y beweegt de schaduw horizontaal en verticaal, vervaging verzacht de rand en verspreidt de hele schaduw voordat de vervaging wordt toegepast. De live-voorbeeld toont elke verandering direct.
Inset trekt de schaduw in het element in plaats van erachter, waardoor een ingedrukte look.. nuttig voor ingangen en schakelen. Schakel de inset aan het schakelen.
Kies een kleur, gebruik dan de opaciteitsschuif; het gereedschap geeft een rgba() waarde uit zodat de schaduw zich op natuurlijke wijze mengt.
Ja. Open Geavanceerde opties om een tweede schaduwlaag in te schakelen met zijn eigen offset, vervaging, kleur en inset.
Nee. De generator draait volledig in uw browser; de schuifregelaars berekenen alleen een CSS-tekenreeks lokaal.
Volledig gratis, geen account en geen grenzen.. een client-side tool met niets te meten.
Ja. Het draait in uw browser, dus CSS Box Shadow Generator werkt op telefoons en tablets, evenals desktop.. Er is geen app te installeren.
Meestal slechts een paar seconden voor een typisch bestand.. CSS Box Shadow Generator begint te werken het moment dat u uw invoer.
Het gebruik van de mutsen is onbeperkt, onder een royale pet die het voor iedereen snel houdt.
Alle moderne browsers.. Chrome, Safari, Firefox en Rand. CSS Box Shadow Generator hoeft niets geïnstalleerd buiten de browser die u al gebruikt.