Stel een waarde voor de CSS-eigenschap box-shadow samen

Met Schaduwgenerator kunnen ontwerpers en front-endontwikkelaars een interface vóór implementatie afstemmen. Stel een waarde voor de CSS-eigenschap box-shadow samen.

Stel een waarde voor de CSS-eigenschap box-shadow samen. Het hulpmiddel is gratis in je browser en toont het resultaat zonder om een account te vragen.

Hoe te gebruiken

Voer de horizontale en verticale offset voor de schaduw in en daarna de waarden voor blur en spread.
Geef de kleur in hexadecimale notatie, met zes cijfers voorafgegaan door een hekje.
Klik op de knop Genereren om de volledige eigenschap box-shadow te verkrijgen.
Kopieer de geproduceerde regel en plak deze in uw stylesheet om deze toe te passen.
Pas de waarden aan als de weergave niet overeenkomt met het gewenste effect.

Voorbeeld

De voorbeeldinvoer beschrijft een verschoven schaduw met blur en een donkere kleur. Na het genereren toont het resultaat de overeenkomstige eigenschap box-shadow. U kunt één waarde tegelijk wijzigen om te zien hoe elke instelling de schaduw beïnvloedt.

Invoer

Resultaat

box-shadow: 2px 2px 8px 1px #000000;

Limieten en formaten

De tool toont geen voorbeeld van de schaduw op een element; hij levert alleen de CSS-code.
Offset-, blur- en spreadwaarden moeten numeriek zijn, en offsets kunnen negatief zijn.
De kleur moet geldig hexadecimaal zijn; een verkeerd gevormde kleur verhindert generatie.
De uiteindelijke weergave hangt af van de browser en de context van het element.

Waar de verwerking gebeurt

Alles gebeurt in uw browser. De instellingen die u invoert, blijven op uw apparaat en worden nooit geüpload of opgeslagen. De CSS-eigenschap wordt lokaal samengesteld, zonder externe verbinding.

Veelgestelde vragen

Welke eenheden moet ik gebruiken voor offsets en blur?

Waarden zijn gewoonlijk eenheidsloos voor offsets en blur, omdat ze pixels vertegenwoordigen. U kunt ook een eenheid zoals px of rem toevoegen. Houd dezelfde logica aan voor alle waarden.

Kan ik een transparante kleur gebruiken?

Het veld verwacht een hexadecimale kleur. Voor een transparante schaduw kunt u een kleur met alfakanaal gebruiken als het formaat dit toestaat, maar de eenvoudigste aanpak is een effen kleur kiezen en de dekking in uw CSS aanpassen.

Waarom is mijn schaduw niet zichtbaar?

Controleer of de eigenschap wordt toegepast op een element met een zichtbare grootte. Een te kleine blur- of spreadwaarde kan de schaduw onzichtbaar maken. Zorg er ook voor dat de kleur niet identiek is aan de achtergrond.