Does the exported PNG keep transparency?

Yes. With the background toggle off, the area outside the rounded corners is fully transparent, so the image drops cleanly onto any colour, photo or web page. Turn the background on if you instead want a solid fill behind the rounded image and shadow.

What is the difference between percent and pixel corner radius?

Percent is measured against the shorter side of your image, so the curve looks the same whether the image is 200px or 4000px wide — ideal for responsive assets. Pixels lock an exact radius regardless of image size, which is handy when matching a specific design spec such as an 8px card.

How do I make a circular avatar?

Set the radius unit to percent and slide it to 50. On a square image that produces a perfect circle; on a rectangle it produces a pill or stadium shape. Add a little padding and a soft even shadow for a polished profile picture.

Which image formats can I upload?

Anything your browser can decode — PNG, JPG/JPEG, WebP and GIF are all supported. The output is always a PNG so that rounded corners and the shadow can use real transparency, which JPG cannot store.

Will the shadow be cut off at the edges?

No. The canvas is automatically enlarged to fit the blur and offset of the shadow plus any padding you add, so the shadow always has room to render fully instead of being clipped at the border.

Is my image uploaded to a server?

Never. Decoding, rounding, the shadow and the PNG export all happen locally with the HTML canvas API. Your picture never leaves your browser, which makes the tool fast and private even for confidential screenshots.

Image Rounded Corners and Shadow Tool

A focused image editor that does one job well: take any picture and give it rounded corners, an optional soft drop shadow and a clean transparent (or filled) PNG you can drop anywhere. It is built for designers, developers, marketers and anyone preparing app icons, avatars, product screenshots, blog headers or social cards who needs a polished, rounded asset in seconds without opening a heavy graphics editor.

Everything runs entirely in your browser. Your image is decoded, composed and exported locally using the HTML canvas API, so nothing is ever uploaded. That makes it both fast and private — safe even for confidential screenshots or unreleased designs — and it works offline once the page has loaded. Your last settings are remembered in this browser via localStorage, so the same look is ready the next time you visit.

How it works

When you add an image, the tool draws it onto an off-screen canvas. It builds a rounded-rectangle clipping path whose radius you control, clips the image to that shape, and the corners outside the curve become transparent. If a shadow is enabled it is painted first, using the native canvas shadow with your chosen blur, offset distance, direction, colour and opacity, so the shadow sits naturally behind the rounded shape.

Crucially, the output canvas is sized to fit everything: the original image, any padding you add, and the full reach of the shadow’s blur and offset. That means the shadow is never clipped at the edge — a common frustration with naive rounding tools. You can set the corner radius as a percent of the shorter side (responsive, scale-independent) or as fixed pixels (exact design specs), and choose an export scale from 0.25× to 3× for retina-ready assets.

Example

Suppose you have a 1200×800 product screenshot and want a modern card look. Set the corner radius to 6% of the shorter side (about 48px), add 14% padding, enable a down shadow with 6% blur and 22% opacity, and turn the background on with a light grey fill. The result is a screenshot that looks like it is floating on a soft card — perfect for a landing page or a documentation hero.

For an app icon, switch to the App icon preset: a 22% radius, no padding, no shadow, transparent background. Drop in a 1024×1024 square and you get the familiar rounded-square icon shape. For an avatar, set the radius to 50%, add a gentle even glow, and export at 2× for a crisp profile picture.

Use case	Radius	Shadow	Background
App icon	22%	off	transparent
Avatar	50%	even glow	transparent
Screenshot card	6%	down	light grey
Web thumbnail	12%	soft down	transparent

Every pixel is rendered in your browser, and the final PNG keeps full transparency wherever there is no image or fill — ready to drop onto any background.