How to Add a Gradient Background to a Screen Recording

Raw screen recordings look like debug footage. They have hard square corners, a plain white or dark background, and nothing to draw the eye to the content. Adding a gradient background, rounding the corners, and dropping a subtle shadow takes a recording from "I just hit record" to "I actually prepared this" — and it takes about 30 seconds.

What the Tool Actually Does

The Mantis Video Background Maker is a browser-based tool that wraps your video in a styled frame. You upload a screen recording, and the tool composites it onto a gradient background with:

• Gradient presets — multiple color combinations from soft to vivid, swappable with a single click
• Rounded corners — a slider from 0px (square) to 40px (heavily rounded). Most polished demos land around 12-20px
• Drop shadow — a slider from 0 to 60. Subtle shadow (10-20) adds depth; heavy shadow (40+) creates a floating card effect
• Padding — controls how much gradient shows around the video (20px to 120px). More padding = more background, better for presentation slides

The canvas updates live as you adjust sliders. When you are satisfied, click download. Output is a WebM file with the gradient frame baked in permanently.

Step-by-Step: From Raw Recording to Polished Output

Step 1 — Record your screen as you normally would. Any screen recorder works.

Step 2 — Open the Mantis Video Background Maker and upload your recording (or drag and drop onto the canvas area).

Step 3 — Your video appears centered on a default gradient background. The canvas shows a live preview.

Step 4 — Try gradient presets. Cooler tones (blue-purple, teal) work well for developer tools and SaaS products. Warm gradients (peach, sunset) suit lifestyle or creative content.

Step 5 — Adjust corner radius. For product demos, 12-16px is a sweet spot. For a softer, friendlier look, go up to 24px.

Step 6 — Add a shadow. Start at 20 and adjust. A shadow below 30 reads as refined; above 40 it reads as intentionally dramatic.

Step 7 — Set padding. If the recording will be embedded in a slide or shared as a standalone image, more padding (80-120px) gives the gradient room to breathe.

Step 8 — Click download. The output is a WebM with all effects composited in.

Sell Custom Apparel — We Handle Printing & Free Shipping

Best Use Cases

Product demos — A SaaS product demo with a matching brand gradient reads as intentional and polished. If your brand colors are blue and purple, the gradient background ties the recording to your visual identity.

Documentation and how-to videos — Tutorial videos with rounded corners look cleaner in docs pages than raw recordings. The framing signals "this is intentional content" not a one-take capture.

Twitter/X and LinkedIn posts — Square or 16:9 recordings shared natively look better with padding around them. The gradient frame prevents the hard edge of the video from looking cut-off on timelines.

Slide decks — Paste the downloaded WebM into a Keynote or PowerPoint slide. The pre-framed video eliminates the need for CSS or border tricks in the slide layout.

Portfolio pieces — Showing off a project or feature you built? A polished recording frame signals craft and attention to detail.

Output Format: WebM

The tool outputs WebM, which is an open video format with strong browser support (Chrome, Firefox, Edge, Safari 16+). It is also the format most screen recorders natively output on modern systems.

WebM is compatible with:

• Embedding directly in HTML5 <video> tags
• Uploading to Twitter/X and LinkedIn natively
• Importing into video editors (DaVinci Resolve, Premiere Pro)
• Conversion to MP4 using browser-native processing engine: browser-native processing engine -i output.webm -c:v libx264 output.mp4

If you need MP4 for a platform that does not accept WebM, the command above converts it in seconds.

Tips for Better Results

Match the gradient to your brand — If your product has a primary blue, find a gradient with a similar hue. Avoid gradients that fight your recording's color palette.

Less is more on shadows — A shadow of 10-15 looks polished. A shadow of 50+ looks like a comic book panel. Unless you specifically want that effect, keep it subtle.

Corner radius consistency — If you are making multiple recordings for the same project, use the same corner radius on all of them. Mixing 8px and 24px in the same doc looks inconsistent.

Use more padding for stills — If you are screenshotting the canvas for a thumbnail, bump padding to 80-100px. The extra gradient space makes the screenshot look intentional as a still image.

Frequently Asked Questions

Does the tool remove the existing video background?

No. The Mantis Video Background Maker adds a decorative gradient frame around your video — it does not perform AI background removal or chroma key compositing. If you need to remove a background from inside the video, that requires a different tool.

What video formats can I upload?

WebM and MP4 work reliably. The tool processes the video in your browser using the browser's native video capabilities, so any format your browser can play can be processed.

Is there a file size limit?

The processing runs entirely in your browser — there is no server-side upload limit. Very large files (1GB+) may be slow depending on your device's processing power and available memory.

Why does my output look blurry?

The output resolution is tied to the canvas size in your browser. For the sharpest output, use a full-size browser window and avoid scaling the preview down.

Can I add a custom color instead of a preset gradient?

The current tool offers preset gradient options. For a fully custom gradient or a solid color background, custom color input is not yet supported in the base tool.