Before / After

Split-frame before/after thumbnail with BEFORE/AFTER chips and a center result stat badge — swap both photos, labels and the stat.

Type: Image
Format: HD · 16:9
Orientation: Landscape

Variablesphoto

Open in editor

Free template · opens in the editor, no account required.

Customize Before / After

Before / After is a ready-to-render Video thumbnails image design formatted for HD · 16:9 and support for variables, photo. Open it in the editor to replace its copy and media, then render variations through the Zvid API.

8 variables: Every value below is a variable you can override — send them in the variables field of the render request (or edit them in the editor) to generate on-brand versions at scale.

eyebrowText

30-DAY TRANSFORMATION

beforeLabelText

BEFORE

afterLabelText

AFTER

statLabelText

LEAN MASS GAINED

statValueText

+18 LBS

accentColor

#34D399

beforeImageMedia URL

pexels-photo-6628962.jpeg

afterImageMedia URL

photo-1517836357463-d25dfeac3438

The exact JSON payload

This is the full render config — POST it to the API, or open it in the editor to tweak.

Open in editor ↗

{
  "type": "image",
  "name": "img-thumb-before-after",
  "resolution": "hd",
  "outputFormat": "png",
  "backgroundColor": "#0B0F0D",
  "variables": {
    "eyebrow": "30-DAY TRANSFORMATION",
    "beforeLabel": "BEFORE",
    "afterLabel": "AFTER",
    "statLabel": "LEAN MASS GAINED",
    "statValue": "+18 LBS",
    "accent": "#34D399",
    "beforeImage": "https://images.pexels.com/photos/6628962/pexels-photo-6628962.jpeg?auto=compress&cs=tinysrgb&w=1600",
    "afterImage": "https://images.unsplash.com/photo-1517836357463-d25dfeac3438?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&ixid=M3w3MDgwMTZ8MHwxfHNlYXJjaHwyfHxneW0lMjB3b3Jrb3V0JTIwd2VpZ2h0c3xlbnwwfHx8fDE3ODM1MjY5ODJ8MA&ixlib=rb-4.1.0&q=80&w=1600"
  },
  "visuals": [
    {
      "type": "IMAGE",
      "src": "{{beforeImage}}",
      "x": 0,
      "y": 0,
      "width": 640,
      "height": 720,
      "anchor": "top-left",
      "radius": {
        "tl": 0,
        "tr": 0,
        "bl": 0,
        "br": 0
      },
      "filter": {
        "saturate": -100,
        "brightness": -10
      },
      "track": 0
    },
    {
      "type": "IMAGE",
      "src": "{{afterImage}}",
      "x": 640,
      "y": 0,
      "width": 640,
      "height": 720,
      "anchor": "top-left",
      "radius": {
        "tl": 0,
        "tr": 0,
        "bl": 0,
        "br": 0
      },
      "track": 0
    },
    {
      "type": "SVG",
      "width": 1280,
      "height": 720,
      "position": "center-center",
      "track": 2,
      "svg": "<svg width='1280' height='720' viewBox='0 0 1280 720' xmlns='http://www.w3.org/2000/svg'><defs><linearGradient id='sb' x1='0' y1='1' x2='0' y2='0'><stop offset='0' stop-color='#050806' stop-opacity='0.9'/><stop offset='0.28' stop-color='#050806' stop-opacity='0'/></linearGradient><linearGradient id='st' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='#050806' stop-opacity='0.72'/><stop offset='0.26' stop-color='#050806' stop-opacity='0'/></linearGradient></defs><rect width='1280' height='720' fill='url(#st)'/><rect width='1280' height='720' fill='url(#sb)'/></svg>"
    },
    {
      "type": "SVG",
      "x": 632,
      "y": 0,
      "width": 16,
      "height": 720,
      "anchor": "top-left",
      "track": 3,
      "svg": "<svg width='16' height='720' viewBox='0 0 16 720' xmlns='http://www.w3.org/2000/svg'><rect x='7' y='0' width='2' height='720' fill='{{accent}}' fill-opacity='0.85'/></svg>"
    },
    {
      "type": "SVG",
      "x": 640,
      "y": 44,
      "width": 440,
      "height": 46,
      "anchor": "top-center",
      "track": 3,
      "svg": "<svg width='440' height='46' viewBox='0 0 440 46' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='440' height='46' rx='23' fill='#050806' fill-opacity='0.55' stroke='{{accent}}' stroke-opacity='0.5' stroke-width='1.2'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 640,
      "y": 56,
      "width": 440,
      "anchor": "top-center",
      "track": 4,
      "text": "{{eyebrow}}",
      "style": {
        "fontFamily": "Space Grotesk",
        "fontSize": "23px",
        "fontWeight": "600",
        "letterSpacing": "0.26em",
        "color": "#8FE9C6",
        "textAlign": "center"
      }
    },
    {
      "type": "SVG",
      "x": 640,
      "y": 360,
      "width": 340,
      "height": 160,
      "anchor": "center-center",
      "track": 4,
      "svg": "<svg width='340' height='160' viewBox='0 0 340 160' xmlns='http://www.w3.org/2000/svg'><rect x='2' y='2' width='336' height='156' rx='24' fill='#0B0F0D' fill-opacity='0.86' stroke='{{accent}}' stroke-width='2'/><rect x='150' y='24' width='40' height='4' rx='2' fill='{{accent}}'/></svg>"
    },
    {
      "type": "TEXT",
      "x": 640,
      "y": 360,
      "width": 320,
      "anchor": "center-center",
      "track": 5,
      "style": {
        "fontFamily": "Manrope"
      },
      "html": "<div style='text-align:center;'><div style='font-size:21px; font-weight:600; letter-spacing:0.18em; color:#8FBFA8;'>{{statLabel}}</div><div style='margin-top:6px; font-size:66px; font-weight:800; letter-spacing:-0.02em; line-height:1; color:{{accent}};'>{{statValue}}</div></div>"
    },
    {
      "type": "SVG",
      "x": 40,
      "y": 634,
      "width": 210,
      "height": 54,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='210' height='54' viewBox='0 0 210 54' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='210' height='54' rx='14' fill='#050806' fill-opacity='0.72' stroke='#FFFFFF' stroke-opacity='0.22' stroke-width='1'/><text x='105' y='35' font-family='Space Grotesk, Arial' font-size='24' font-weight='700' letter-spacing='4' fill='#EAF7F0' text-anchor='middle'>{{beforeLabel}}</text></svg>"
    },
    {
      "type": "SVG",
      "x": 1030,
      "y": 634,
      "width": 210,
      "height": 54,
      "anchor": "top-left",
      "track": 5,
      "svg": "<svg width='210' height='54' viewBox='0 0 210 54' xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='210' height='54' rx='14' fill='{{accent}}'/><text x='105' y='35' font-family='Space Grotesk, Arial' font-size='24' font-weight='700' letter-spacing='4' fill='#05231A' text-anchor='middle'>{{afterLabel}}</text></svg>"
    }
  ]
}