Box Shadow Generator
Adjust offsets, blur, spread, colour and opacity for each layer, then copy the box-shadow line.
Deze inhoud is in het Engels.
Uitgewerkte voorbeelden
Soft shadow under a card
Horizontal 4px, vertical 4px, blur 12px, spread 0px, black at 25 per cent opacity
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.25);
Offsets move the shadow, and blur softens its edge, so this places the shadow down and to the right.
Tight shadow with a negative spread
Horizontal 0px, vertical 8px, blur 10px, spread -4px, black at 30 per cent opacity
box-shadow: 0px 8px 10px -4px rgba(0, 0, 0, 0.3);
A negative spread shrinks the shadow, which gives a tighter edge than the blur alone would.
Over Box Shadow Generator
A box shadow adds depth to a card, button, panel or image by drawing a soft or sharp shadow around its edge. The shape of a shadow is set by four numbers: a horizontal and vertical offset, a blur amount and a spread. The offsets move the shadow sideways and up or down, the blur softens its edge, and the spread makes it grow or shrink. This generator lets you adjust all four, along with the colour and opacity, and shows each change on a live preview so you can see the result as you go.
Real light is rarely a single hard edge, so many good shadows are built from two or three layers. A tight, darker layer sits close to the element and a wider, lighter layer sits behind it. You can add up to four layers here and switch any of them to an inset shadow, which is drawn inside the box for a pressed or recessed look. The output is one box-shadow line, with the first layer shown on top, ready to paste into your stylesheet.
Zo gebruikt u Box Shadow Generator
- Adjust the horizontal and vertical offsets for the first layer.
- Set the blur, spread, colour and opacity until the shadow looks right.
- Add another layer for a softer shadow behind it, or tick inset for a shadow inside the box.
- Copy the box-shadow line and paste it into the rule for your element.
Veelvoorkomend gebruik
- Lifting a product card or pricing panel off the page
- Giving a button a raised look that changes on hover
- Creating an inset shadow for an input field or a pressed state
- Adding a gentle glow behind an image or avatar
Veelgestelde vragen
What do the offset, blur and spread values do?
The horizontal offset moves the shadow left or right, and the vertical offset moves it up or down. A positive vertical offset drops the shadow below the element. Blur softens the edge, with larger numbers giving a wider, fainter edge. Spread changes the size of the shadow before blur is applied, so a negative spread makes the shadow smaller than the element and hides it behind the edges.
Why use more than one shadow layer?
One shadow often looks flat or artificial. Combining a small, darker shadow close to the element with a larger, lighter one behind it copies how light falls on real objects. Each extra layer adds a little more depth. Keep the layers subtle, and use the preview to check that the combined effect looks smooth rather than heavy or muddy.
What is an inset shadow?
An inset shadow is drawn inside the edge of the element instead of outside it. It makes the box look recessed or pressed, which suits text inputs, toggle tracks and pressed buttons. Tick the inset option on a layer to use it. Inset and outside shadows can be combined in the same box-shadow line, and they are layered in the order shown.
Which opacity should I use for a shadow?
Most shadows look best between 5% and 20% opacity. A shadow that is too dark can look heavy, especially on light backgrounds, while very faint shadows may disappear on some screens. Test the shadow on the actual background colour of your page, because the same values can look stronger on a dark background than on a white one.
Does a box shadow change the size of my element?
No. A box shadow is drawn outside the element without changing its layout, so it does not push other content around. This makes it a good choice for hover effects and focus states. If a shadow is clipped at the edge of a container, check that the container does not have overflow set to hidden, or add some padding around the element.