Overview
Introduction
This tool gives a PNG a wavy top and bottom edge directly in your browser, using a sine wave to decide how much of each column near the edges is cut to transparency.
It's a quick way to add a decorative, non-rectangular border to a banner, card, or section graphic.
What Is Wavy-shaped PNG Creator?
A client-side edge-masking tool that computes a sine wave value for every column of an uploaded image and uses it to decide how many rows near the top and bottom of that column become transparent.
Amplitude controls the wave's height and frequency controls how many wave cycles repeat across the image's width.
How Wavy-shaped PNG Creator Works
For each column, the tool evaluates a sine function scaled by the column's horizontal position, the chosen frequency, and an effective amplitude (capped so it never exceeds roughly half the image's height).
Rows within that wave's reach near the top or bottom of the column are set to fully transparent; all other rows, including the always-preserved middle band, keep their original pixel values.
When To Use Wavy-shaped PNG Creator
Use it to add a wavy decorative border to a banner or hero image before overlaying it on a page.
It's also useful for section dividers or card graphics that need a non-straight edge rather than a hard rectangular cutoff.
Often used alongside Star-shaped PNG Creator and Round PNG Creator.
Features
Advantages
- Amplitude and frequency give fine control over the wave's depth and repetition without any manual path drawing.
- Runs entirely client-side with no server upload.
- Amplitude is automatically clamped so a solid opaque band always survives in the middle.
Limitations
- The wave shape is a fixed sine curve; there's no option for a different wave profile like a sawtooth or square wave.
- Very tall, narrow images limit how much amplitude can be applied since it's capped relative to image height.
Examples
Best Practices & Notes
Best Practices
- Use a wider image if you want each wave cycle to look visually distinct at a given frequency.
- Keep amplitude modest relative to image height for a subtle decorative effect rather than an aggressive cutoff.
Developer Notes
The pure function clones the input PixelBuffer and, for each column, evaluates a sine expression to determine an effective wave height, then sets alpha to 0 for rows within that wave's reach near the top or bottom; the effective amplitude is clamped to at most roughly half the image height so a solid center band is always preserved.
Wavy-shaped PNG Creator Use Cases
- Adding a decorative wavy border to a website banner
- Creating a wave-edged section divider graphic
- Styling a card or thumbnail with a non-rectangular top/bottom edge
Common Mistakes
- Setting amplitude very high on a short image and being surprised how little middle content remains, since the effective amplitude is capped relative to height but can still consume most of a short image.
- Expecting the wave shape to differ from a smooth sine curve — the pattern is always sinusoidal.
Tips
- Combine with the square PNG creator first if your source image is short and you want more vertical room for the wave to work with.
- Try frequency=1 for a single broad wave across the whole width instead of repeating cycles.