---
title: "Image Outline — Framer component · Best of Framer"
description: "$5.00 · Framer component · by EvolveHub · Effects. Image Outline is a Framer code component for adding soft, directional shadow edges around transparent image assets."
canonical: "https://framer.elliotli.dev/component/image-outline"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Image Outline

# Image Outline

outlines for images

[View on Framer](https://framer.com/marketplace/components/image-outline/?via=elliot-li)

![Image Outline preview image 1](https://framer.elliotli.dev/og/component/image-outline/88a0574b08ee1c96/1600x1200.jpg)

## Summary

Image Outline is a Framer code component for adding soft, directional shadow edges around transparent image assets.

## Description

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.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-j1t0bewb-V0MYNK4Li9nIBhwwfjM5IRtagSdc6w)

**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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-j4vgdbny-oseoMqq94QLdBZqL4RgA4Z8PmGoAVn)

**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

## Rank history [How rankings work →](/terms#rankings)

-   All · #6865

## Details

- **Author**: EvolveHub
- **Price**: $5.00
- **Published**: 2026-04-15
- **Updated**: 2026-10-08
- **Added**: 2026-04-10
- **Categories**: Effects

## More like this

-   [Particle Image](/component/particle-image) — Jamik · $12 — Logos and photos as 3D points
-   [Ascii Portrait](/component/ascii-portrait) — The Black Sheep · Free — Photos that dissolve into ASCII
-   [Sandfall](/component/sandfall) — Cyedi Creative Studio · $5 — Your headline, buried in coloured
-   [Still Water](/component/still-water) — DariStudio · $9 — Water ripples over any photo