Image Outline

Image Outline is a Framer code component for adding soft, directional shadow edges around transparent image assets. It works especially well with PNG cutouts, stickers, product renders, and illustrations that need a little more depth without editing the source file.

Use Cases

- Product cutouts on landing pages

- Floating illustrations and sticker-style graphics

- Hero visuals that need subtle depth

- Transparent assets in marketing sections

Properties

- Image: Set the source, alt text, and fit behavior

- Shadow Mode: Choose Full, Horizontal, Vertical, or Custom

- Color: Set the outline shadow color

- Density: Control shadow opacity

- Blur: Soften or sharpen the outline edge

- Spread: Push the shadow outward from the image

- Offset X / Y: Shift the shadow position

- Custom Edges: Enable top, right, bottom, and left edges individually in Custom mode

Customization

Start by uploading a transparent image, then adjust the shadow settings to match the style of your composition. Keep blur low for a crisp outline look, or raise it for a softer glow-like effect. Custom mode is useful when you want directional emphasis on only one or two sides.

License

Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

Version

1.0.0