SVG feOffset Filter Primitive
feOffset shifts an input graphic by dx and dy amounts, most commonly used to displace a blurred copy for a drop shadow effect.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Shifting Graphics with dx and dy
feOffset takes an input via the in attribute and shifts it by the dx and dy attribute values in user space units, producing a displaced copy of the input graphic — this displacement is what gives a drop shadow its characteristic offset appearance rather than sitting directly beneath the source shape.
- dx and dy attributes control horizontal and vertical shift distance
- The in attribute selects which prior filter result gets shifted
- Displacement is what gives a drop shadow its characteristic offset look
Combining feOffset with Blur and Merge
The standard drop shadow recipe chains feGaussianBlur to soften a copy of the source, feOffset to displace that blurred copy by a few units, and feMerge to layer the shifted blur beneath the original SourceGraphic, producing a soft, offset shadow effect entirely within the SVG filter pipeline.
- feGaussianBlur softens a copy of the source graphic first
- feOffset then displaces that blurred copy by a small dx/dy amount
- feMerge layers the shifted blur beneath the original SourceGraphic
Frequently Asked Questions
What units do dx and dy use in feOffset?
By default dx and dy are in the coordinate system established by primitiveUnits, typically user space units matching the rest of the document's coordinate system.
Can feOffset shift in a negative direction?
Yes, dx and dy accept negative values, shifting the copy up or left instead of down or right, useful for shadows cast from a different light angle.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG