Generated filter
The generated SVG defines a soft-shadow filter using feDropShadow and applies it to a card element.
Use cases
Use it as a starting point for shadowed cards, icons, UI previews, and SVG filter experiments.
Generate an SVG card that demonstrates a reusable feDropShadow filter.
Page context
SVG Shadow Generator creates an SVG card that demonstrates a reusable feDropShadow filter.
The generated SVG defines a soft-shadow filter using feDropShadow and applies it to a card element.
Use it as a starting point for shadowed cards, icons, UI previews, and SVG filter experiments.
Generate an SVG card that demonstrates a reusable feDropShadow filter.
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="220" viewBox="0 0 360 220" role="img" aria-label="Generated SVG shadow"><defs><filter id="soft-shadow" x="-30%" y="-30%" width="160%" height="160%"><feDropShadow dx="0" dy="18" stdDeviation="14" flood-color="#0f172a" flood-opacity="0.22"/></filter></defs><rect width="360" height="220" fill="#f8fafc"/><rect x="72" y="52" width="216" height="116" rx="24" fill="#ffffff" filter="url(#soft-shadow)"/><circle cx="130" cy="110" r="24" fill="#14b8a6"/><path d="M172 94h62M172 122h42" stroke="#0f766e" stroke-width="10" stroke-linecap="round"/></svg>