Skip to main content
Open Screen offers extensive customization options to match your brand and create professional-looking screen recordings. This guide covers all visual customization features.

​
Background Customization

The background surrounds your video content and sets the visual tone for your recording.

​
Using Built-in Wallpapers

Open Screen includes 18 professionally designed wallpapers:
  1. Open the Settings Panel (right sidebar)
  2. Expand Background section
  3. Select the Image tab
  4. Click any wallpaper to apply it
Wallpapers are categorized by color tone and style. Preview each to find what complements your content best.

​
Solid Colors

For minimalist or brand-matched backgrounds:
  1. Open Background section
  2. Select Color tab
  3. Choose from 16 preset colors:
    • Red, Yellow, Green, White
    • Blue, Orange, Purple, Pink
    • Cyan, Deep Orange, Light Green, Amber
    • Brand Green, Black, Blue Grey, Brown
  4. Click any color to apply
Use Cases:
  • Black (#000000) - Professional, high contrast
  • White (#FFFFFF) - Clean, documentation-friendly
  • Brand Green (#34B27B) - Open Screen branded
  • Custom colors - Match your brand palette

​
Gradient Backgrounds

24 beautiful gradient presets for dynamic backgrounds:
  1. Open Background section
  2. Select Gradient tab
  3. Preview and select from:
    • Warm gradients (orange, yellow, red tones)
    • Cool gradients (blue, cyan, purple tones)
    • Multi-color gradients
    • Subtle to dramatic transitions
Gradients are rendered during export, ensuring smooth transitions and high quality output.

​
Custom Images

Upload your own background images:
  1. Click Upload Custom in the Image tab
  2. Select a JPG or JPEG file
  3. Image is loaded instantly
  4. Remove custom images by clicking the X icon
Image Requirements:
  • Format: JPG or JPEG only
  • Recommended size: 1920×1080 or higher
  • Aspect ratio: Should match or exceed your video
Custom images are stored in the project file. Large images increase project file size.

​
Video Effects

Effects enhance the visual presentation of your recorded content.

​
Shadow

Add depth with drop shadow: Setting: 0-100% intensity Common Settings:
  • 0% - No shadow (flat design)
  • 30-50% - Subtle shadow (professional)
  • 70-100% - Dramatic shadow (emphasis)
Best for:
  • Product demos with brand backgrounds
  • Tutorial videos
  • Social media content

​
Background Blur

Blur the background wallpaper for focus effect: Toggle: On/Off Effect:
  • Applies Gaussian blur to background
  • Video remains sharp
  • Creates depth-of-field effect
Best for:
  • Busy or colorful backgrounds
  • Emphasizing video content
  • Professional presentations

​
Motion Blur

Add realistic motion blur: Toggle: On/Off Effect:
  • Simulates camera motion blur
  • Smooths fast cursor movements
  • Makes animations more natural
Best for:
  • Fast-paced demos
  • Cursor-heavy tutorials
  • Smooth, cinematic feel
Motion blur is calculated during export and doesn’t affect preview performance.

​
Roundness

Round video corners: Setting: 0-16px border radius Common Settings:
  • 0px - Sharp corners (traditional)
  • 8px - Subtle rounding (modern)
  • 12px - Noticeable rounding (polished)
  • 16px - Maximum rounding (very rounded)
Best for:
  • Modern, sleek appearance
  • Social media content
  • Brand-aligned design

​
Padding

Control space between video and background: Setting: 0-100% padding Visual Impact:
  • 0% - Video fills entire frame
  • 25% - Small border
  • 50% - Balanced composition (recommended)
  • 75% - Large border
  • 100% - Maximum padding
Best for:
  • Showcasing backgrounds
  • Creating breathing room
  • Professional presentation style

​
Aspect Ratio

Choose your video dimensions from the timeline toolbar:

​
Available Ratios

16:9 (Landscape)
  • Standard widescreen
  • YouTube, Vimeo, presentations
  • Most versatile option
9:16 (Portrait)
  • Vertical video
  • Instagram Stories, TikTok, mobile
  • Full-screen mobile viewing
1:1 (Square)
  • Social media posts
  • Instagram feed, LinkedIn
  • Balanced composition
4:3 (Classic)
  • Traditional format
  • Documentation
  • Legacy compatibility
4:5 (Instagram Portrait)
  • Instagram portrait posts
  • Vertical social content
  • Mobile-optimized
16:10 (Widescreen Display)
  • Desktop applications
  • Widescreen monitors
  • Professional displays
10:16 (Vertical Widescreen)
  • Vertical mobile content
  • Portrait-oriented apps
  • Tall displays
Change aspect ratio anytime - it’s non-destructive. Export the same recording in multiple ratios for different platforms.

​
Crop Control

Crop your video to focus on specific areas:
  1. Click Crop Video in Video Effects section
  2. Drag edges to adjust crop region:
    • Top - Crop from top
    • Bottom - Crop from bottom
    • Left - Crop from left
    • Right - Crop from right
  3. Click Done to apply
Crop Use Cases:
  • Remove taskbars or menus
  • Focus on specific window area
  • Exclude private/sensitive information
  • Create tighter framing
Crop is applied in normalized coordinates (0-1), so it scales correctly with any aspect ratio.

​
Annotation Styling

​
Text Customization

When an annotation is selected, customize text appearance: Font Styles (Built-in):
  • Classic - System UI (clean, readable)
  • Editor - Georgia serif (editorial)
  • Strong - Impact (bold, attention-grabbing)
  • Typewriter - Courier New (monospace)
  • Deco - Brush Script (decorative)
  • Simple - Arial (universal)
  • Modern - Verdana (contemporary)
  • Clean - Trebuchet MS (minimalist)
Font Sizes:
  • 12px to 128px
  • Common: 24px, 32px, 48px, 64px
Text Formatting:
  • Bold - Increase weight
  • Italic - Slant text
  • Underline - Add underline
Text Alignment:
  • Left, Center, Right

​
Custom Fonts

Add your brand fonts:
  1. Select a text annotation
  2. Click Add Custom Font
  3. Enter font details:
    • Font name (display name)
    • Font family (CSS font-family value)
    • Font URL (hosted .ttf, .otf, or .woff file)
  4. Click Add Font
  5. Font appears in dropdown
Font URL Requirements:
  • Must be publicly accessible
  • Supported formats: TTF, OTF, WOFF, WOFF2
  • Use CDN or Google Fonts URL
Example:
Name: Roboto Bold
Family: 'Roboto', sans-serif
URL: https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap
Custom fonts are loaded during export for consistent rendering.

​
Color Customization

Text Color:
  • 16 preset colors
  • Click color swatch to choose
  • High contrast recommended for readability
Background Color:
  • Transparent (default)
  • 16 preset colors
  • Click Clear Background to remove
Popular Combinations:
  • White text + transparent background (classic)
  • Black text + white background (high contrast)
  • White text + brand color background (branded)
  • Colored text + transparent background (subtle)

​
Arrow Styling

Customize arrow annotations: Direction: 8 options
  • Up, Down, Left, Right
  • Up-Right, Up-Left, Down-Right, Down-Left
Stroke Width: 1-6px
  • 2-3px: Subtle
  • 4-5px: Standard
  • 6px: Bold
Color: 16 preset options
  • Match brand colors
  • High contrast for visibility

​
Export Settings

Customize output quality and format:

​
MP4 Export

Quality Levels: Low (720p)
  • Resolution: 1280×720 (landscape)
  • Bitrate: 10 Mbps
  • File size: Smallest
  • Best for: Quick sharing, email, web
Medium (1080p)
  • Resolution: 1920×1080 (landscape)
  • Bitrate: 20 Mbps
  • File size: Balanced
  • Best for: Most use cases, YouTube, documentation
High (Source)
  • Resolution: Source resolution preserved
  • Bitrate: 30-80 Mbps (based on resolution)
  • File size: Largest
  • Best for: 4K displays, archival, professional work
Actual export dimensions maintain your selected aspect ratio. Values shown are for 16:9.

​
GIF Export

Frame Rate:
  • 10 fps - Smallest file size
  • 12 fps - Balanced
  • 15 fps - Smooth (recommended)
  • 20 fps - Smoothest, larger files
Size Presets:
  • Small (Sm) - Optimized for file size
  • Medium (Med) - Balanced (1280px width)
  • Original (Orig) - Full resolution
Loop: Enable for continuous playback GIF Best Practices:
  • Keep duration under 10 seconds
  • Use 12-15 fps for best file size
  • Medium size for documentation
  • Enable loop for repeating content

​
Creating Brand Presets

Save time by creating reusable brand styles:
1

Configure your brand style

Set up:
  • Brand background color or wallpaper
  • Consistent padding (e.g., 50%)
  • Shadow intensity (e.g., 40%)
  • Border radius (e.g., 8px)
  • Aspect ratio (e.g., 16:9)
2

Add brand elements

  • Upload logo as image annotation
  • Create text annotation with brand fonts
  • Set brand colors
  • Position elements
3

Save as template project

Click Save Project and name it:
  • “Brand Template - 16:9”
  • “Brand Template - 1:1”
  • “Brand Template - Story”
4

Reuse for new recordings

  1. Load Project your template
  2. Record or load new video
  3. Template style is applied
  4. Adjust timeline edits
  5. Export with consistent branding

​
Style Recommendations by Use Case

​
Product Demos

Background: Gradient or brand color
Shadow: 40-50%
Blur: Enabled
Roundness: 8-12px
Padding: 50%
Aspect Ratio: 16:9

​
Documentation / Help Articles

Background: White or light gray
Shadow: 30%
Blur: Disabled
Roundness: 4px
Padding: 40%
Aspect Ratio: 16:9 or 4:3
Format: GIF (short clips) or MP4

​
Social Media

Background: Brand gradient or color
Shadow: 60%
Blur: Enabled
Roundness: 12px
Padding: 60%
Aspect Ratio: 9:16 (Stories) or 1:1 (Posts)
Quality: Medium

​
Tutorial Videos

Background: Solid dark color
Shadow: 40%
Blur: Disabled
Roundness: 8px
Padding: 45%
Aspect Ratio: 16:9
Quality: Medium or High

​
Professional Presentations

Background: Professional wallpaper or solid
Shadow: 50%
Blur: Enabled
Roundness: 8px
Padding: 50%
Aspect Ratio: 16:9 or 16:10
Quality: High
Always preview your style before recording or exporting. Visual preferences vary by platform and audience.

​
Quick Style Shortcuts

  • Background: White (#FFFFFF)
  • Shadow: 0%
  • Blur: Disabled
  • Roundness: 0px
  • Padding: 20%
  • Background: Gradient (your choice)
  • Shadow: 50%
  • Blur: Enabled
  • Roundness: 12px
  • Padding: 50%
  • Background: Dark solid color
  • Shadow: 40%
  • Blur: Disabled
  • Roundness: 8px
  • Padding: 45%
  • Background: Black (#000000)
  • Shadow: 70%
  • Blur: Enabled
  • Motion Blur: Enabled
  • Roundness: 0px
  • Padding: 30%
  • Aspect Ratio: 16:9

​
Next Steps

Creating Demos

Apply these styles to create professional product demos

Advanced Editing

Master timeline editing and animation techniques

Build docs developers (and LLMs) love

Get started for freeTalk to us