Skip to main content

​
Backgrounds

Add custom backgrounds behind your screenshots for a polished, professional look. Perfect for social media, presentations, or marketing materials.

​
Available backgrounds

DomShot provides several gradient presets:
BackgroundIDCSS Value
SunsetsunsetOrange to coral gradient
OceanoceanBlue to purple gradient
ForestforestDark green to light green gradient
Purple Hazepurple-hazePurple to deep violet gradient
MidnightmidnightDark multi-tone gradient
CandycandyPink to rose gradient
SkylineskylineBlue to white gradient
AutumnautumnOrange to magenta gradient
Ocean Blueocean-blueSolid blue
Vibrant Redvibrant-redSolid red
Forest Greenforest-greenSolid green
Sunset Orangesunset-orangeSolid orange
Royal Purpleroyal-purpleSolid purple
Hot Pinkhot-pinkSolid pink
IndigoindigoSolid indigo
TealtealSolid teal
View all presets in the Dashboard Playground or create your own in Dashboard Backgrounds.

​
Basic background

bash
curl "https://api.domshot.com/shot?key=YOUR_API_KEY&url=https://example.com&background=sunset" \
  --output screenshot.png

const params = new URLSearchParams({
  key: 'YOUR_API_KEY',
  url: 'https://example.com',
  background: 'sunset'
});

await fetch(`https://api.domshot.com/shot?${params}`)
  .then(res => res.blob())
  .then(blob => fs.writeFile('screenshot.png', blob));

$params = [
  'key' => 'YOUR_API_KEY',
  'url' => 'https://example.com',
  'background' => 'sunset'
];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://api.domshot.com/shot?' . http_build_query($params));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
$result = curl_exec($ch);
file_put_contents('screenshot.png', $result);
curl_close($ch);

package main

import (
    "net/http"
    "net/url"
)

func main() {
    params := url.Values{}
    params.Set("key", "YOUR_API_KEY")
    params.Set("url", "https://example.com")
    params.Set("background", "sunset")

    resp, _ := http.Get("https://api.domshot.com/shot?" + params.Encode())
    defer resp.Body.Close()

    // Save response to file
}

​
Custom padding and border radius

bash
curl "https://api.domshot.com/shot?key=YOUR_API_KEY&url=https://example.com&background=sunset&backgroundPadding=60&backgroundBorderRadius=24" \
  --output screenshot.png

const params = new URLSearchParams({
  key: 'YOUR_API_KEY',
  url: 'https://example.com',
  background: 'sunset',
  backgroundPadding: '60',
  backgroundBorderRadius: '24'
});

await fetch(`https://api.domshot.com/shot?${params}`)
  .then(res => res.blob())
  .then(blob => fs.writeFile('screenshot.png', blob));

$params = [
  'key' => 'YOUR_API_KEY',
  'url' => 'https://example.com',
  'background' => 'sunset',
  'backgroundPadding' => '60',
  'backgroundBorderRadius' => '24'
];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://api.domshot.com/shot?' . http_build_query($params));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
$result = curl_exec($ch);
file_put_contents('screenshot.png', $result);
curl_close($ch);

package main

import (
    "net/http"
    "net/url"
)

func main() {
    params := url.Values{}
    params.Set("key", "YOUR_API_KEY")
    params.Set("url", "https://example.com")
    params.Set("background", "sunset")
    params.Set("backgroundPadding", "60")
    params.Set("backgroundBorderRadius", "24")

    resp, _ := http.Get("https://api.domshot.com/shot?" + params.Encode())
    defer resp.Body.Close()

    // Save response to file
}
The backgroundPadding parameter accepts pixel values. If not specified, it defaults to 5% of the viewport’s minimum dimension.

​
With mobile viewport

bash
curl "https://api.domshot.com/shot?key=YOUR_API_KEY&url=https://example.com&background=sunset&viewportType=mobile" \
  --output mobile-preview.png

const params = new URLSearchParams({
  key: 'YOUR_API_KEY',
  url: 'https://example.com',
  background: 'sunset',
  viewportType: 'mobile'
});

await fetch(`https://api.domshot.com/shot?${params}`)
  .then(res => res.blob())
  .then(blob => fs.writeFile('mobile-preview.png', blob));

$params = [
  'key' => 'YOUR_API_KEY',
  'url' => 'https://example.com',
  'background' => 'sunset',
  'viewportType' => 'mobile'
];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'https://api.domshot.com/shot?' . http_build_query($params));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
$result = curl_exec($ch);
file_put_contents('mobile-preview.png', $result);
curl_close($ch);

package main

import (
    "net/http"
    "net/url"
)

func main() {
    params := url.Values{}
    params.Set("key", "YOUR_API_KEY")
    params.Set("url", "https://example.com")
    params.Set("background", "sunset")
    params.Set("viewportType", "mobile")

    resp, _ := http.Get("https://api.domshot.com/shot?" + params.Encode())
    defer resp.Body.Close()

    // Save response to file
}

​
How it works

When you specify a background, DomShot:
  1. Captures the screenshot at your specified viewport
  2. Creates a canvas with the background color/gradient
  3. Places your screenshot in the center with specified padding
  4. Applies border radius and shadow effects
  5. Returns the composite image

​
Parameters

ParameterTypeDefaultDescription
backgroundstring-Background ID from table above or custom backgrounds
backgroundPaddingnumber5% of min viewport dimensionPadding around screenshot in pixels
backgroundBorderRadiusnumber16Corner radius in pixels
Backgrounds add extra canvas size. Calculate final dimensions as: Final size = Viewport size + (padding × 2)

​
Finding background IDs

Preset background IDs are listed in the table above. For custom backgrounds:
  1. Go to Dashboard Backgrounds
  2. Click on your background to view details
  3. Copy the background ID
Backgrounds are scoped to your organization. You can only use backgrounds that belong to your organization or the system presets.

​
See also