Image Overlays
Learn how to overlay images on your video. Use blend modes, opacity, drop shadows, and more to place watermarks, logos, and decorative images.
Image Overlay Overview
VideoBuff lets you layer images on top of your video. Image overlays are useful for logos, watermarks, decorative graphics, frames, and many other purposes.
With 13 blend modes, you can go beyond simple overlays to create artistic composites of your footage and images. Additional effects like opacity, drop shadow, and border radius enable fine-tuned visual expression.
Import and Place Images
You can import images in JPG, PNG, WebP, and GIF formats. Drag images from the media panel onto an image track on the timeline. Adjust the clip length by dragging to control how long the image is displayed.
Alpha channels in PNG images are preserved, so you can use logos and graphics with transparent backgrounds directly. Animated GIFs are also supported, which can be used as moving stickers or effects.
Transform
Image position is specified with X/Y coordinates using normalized values (0 to 1). Rotation is specified in degrees with full 360-degree freedom.
Scale adjusts from 0% to 200% relative to the original size. Opacity ranges from 0% (fully transparent) to 100% (fully opaque), which is useful for semi-transparent watermarks.
A crop function lets you display only a portion of the image.
Blend Modes
Thirteen blend modes are available. Normal composites the image as-is. Multiply emphasizes dark areas, suitable for adding shadows and texture overlays.
Screen emphasizes bright areas, ideal for light and flare effects. Overlay enhances contrast, commonly used for adding texture to footage.
Additional modes include Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion, and Hue, enabling a wide range of creative visual effects.
Drop Shadow and Border Radius
Enabling the drop shadow feature adds a shadow behind the image to create a floating appearance. Shadow color, blur amount, and X/Y offset can each be adjusted independently. Adding a subtle shadow to images with white backgrounds is particularly effective for improving visibility on video.
Border radius ranges from 0% to 50%, where 50% creates a perfect circle. This is useful for displaying profile pictures or thumbnails with rounded corners.
Technical Note: Image Compositing
Blend modes are implemented using the Canvas 2D globalCompositeOperation property. This leverages the browser's natively supported compositing modes for fast rendering.
During export, the same compositing operations are reproduced on an OffscreenCanvas to ensure output matches the preview. Drop shadow uses the Canvas shadow API, and border radius is implemented with a combination of the clip and arc methods.
All these operations benefit from GPU acceleration, enabling smooth playback even with multiple image overlays.