Drop Shadow Creator

The Drop Shadow Creator builds the CSS box-shadow property for web pages. Six controls set the shadow: Horizontal Offset, Vertical Offset, Blur Radius, Spread Radius, Opacity and Shadow Color, plus an Inset Shadow checkbox. A preview box shows the result as you move each slider, and the matching code appears below it, ready to copy. It does not open or edit photo files. Instead, it gives photographers who run their own website a quick way to add depth to gallery images, cards and buttons.

There is no angle dial. The direction comes from the two offset sliders, each running from minus 50 to 50 pixels. Positive Horizontal Offset moves the shadow right and negative moves it left; positive Vertical Offset moves it down and negative moves it up. To suggest light from the top left, as in many portfolio designs, use positive values for both so the shadow falls to the bottom right. Larger offsets suggest a lower, more directional light, while small offsets keep the shadow close to the edge.

A CSS shadow is drawn by the browser around the element on your page, so the photo file itself stays untouched. You can change the shadow for a whole gallery by editing one line of CSS, without re-exporting a single image. It also adds nothing to the image's file size and scales cleanly with responsive layouts, because the browser redraws it at whatever size the image appears. Baking a shadow into the pixels, by contrast, fixes its look and the background color it was drawn against.

Anywhere your website lets you add custom CSS. Common uses are gallery thumbnails on a portfolio page, featured images on a blog, pricing or package cards, testimonial boxes, buttons and contact forms. Apply the copied declaration to the class or element you want to lift off the page. A soft, low-opacity shadow is usually enough for photographs, because a heavy shadow competes with the image and draws the eye away from your work.

A harsh shadow usually means the blur radius is too low or the opacity too high. First raise Blur Radius, which goes up to 100 pixels, so the edge fades gradually the way it does under soft light. Then lower Opacity so the shadow sits more lightly on the page. Also check the color: pure black often looks heavy on a light background. Choosing a dark, slightly tinted color with Shadow Color, for example a deep gray or a dark version of your page color, usually blends far better.

Writing box-shadow by hand means remembering the value order (horizontal offset, vertical offset, blur, spread, color), converting a hex color and opacity into an rgba value, then reloading the page to see each change. The Drop Shadow Creator does that bookkeeping for you. Every slider updates the preview instantly, the color and opacity are combined into rgba automatically, and the code is assembled in the right order. You still decide where the CSS goes, but the trial and error happens in seconds.

It produces three lines: the standard box-shadow declaration, followed by the same value with the -webkit- and -moz- prefixes. Each line lists the offsets, blur and spread in pixels and the color as an rgba value that includes your opacity, with the word inset at the start when that option is checked. Current browsers only need the first, unprefixed line; the prefixed lines matter only for very old browsers. Click Copy CSS to copy all three, and the button briefly confirms the copy.

To make an element look as if it hovers above the page, push the shadow further away and soften it. Raise Vertical Offset so the shadow sits well below the element, increase Blur Radius so its edges spread out, and lower Opacity so it becomes faint. A slightly negative Spread Radius tucks the shadow in from the sides, which strengthens the lifted look. A tight, dark shadow with little offset reads as an element resting on the surface, while a wide, soft, distant one reads as floating.

A box-shadow is drawn outside the element's box, so anything that hides overflow around it will cut the shadow off. The most common cause is a parent container with overflow set to hidden, often used by gallery grids and sliders. Tight spacing can have a similar effect when neighboring elements cover the shadow. To fix it, add padding or margin around the element so the shadow has room, or remove the overflow setting from the container if your layout allows it.

Checking Inset Shadow draws the shadow inside the element's edges instead of outside them, so the element looks pressed into the page rather than raised above it. The same offset, blur, spread, opacity and color settings apply, and the generated CSS gains the word inset at the start of the value. Photographers sometimes use a soft inset shadow to give an image a subtle recessed frame, or to make an input field or box look set into the page.