CSS Parameter

The css parameter allows you to inject additional CSS styles into the page. This is useful for styling HTML content or modifying the appearance of a webpage being captured.

Specifications

Property	Value
Type	string
Required	No
Default	null
API	Both HTML/CSS and Screenshot APIs

Description

The CSS parameter can be used to:

• Add styles to HTML content without embedding them in the HTML
• Override existing styles on a webpage being captured
• Remove unwanted elements from screenshots (cookie notices, popups)
• Modify webpage appearance for better captures

Examples

Basic CSS Styling

{
    "html": "<div class='container'><h1>Hello World</h1></div>",
    "css": ".container { padding: 20px; background: #f0f0f0; } h1 { color: blue; }"
}

Modifying Screenshot Styles

{
    "url": "https://example.com",
    "css": "body { font-family: Arial, sans-serif; } .header { background: #fff !important; }"
}

Webpage Modification Examples

The CSS parameter is particularly useful for cleaning up webpage screenshots by removing unwanted elements. Here are some common use cases:

Common Cookie Notice Selectors

{
    "url": "https://example.com",
    "css": "#cookieBanner, #cookie-banner, .cookie-notice, .cookie-consent, .cookie-popup, #gdpr-banner, .gdpr-banner { display: none !important; }"
}

OneTrust Cookie Banner

{
    "url": "https://example.com",
    "css": "#onetrust-banner-sdk, .onetrust-pc-dark-filter { display: none !important; }"
}

CookieBot Banner

{
    "url": "https://example.com",
    "css": "#CybotCookiebotDialog, .CookieDeclaration { display: none !important; }"
}

Osano Cookie Banner

{
    "url": "https://example.com",
    "css": ".osano-cm-window, #osano-cm-dom-info-dialog { display: none !important; }"
}

Quantcast Banner

{
    "url": "https://example.com",
    "css": ".qc-cmp2-container { display: none !important; }"
}

Cookie Law Info Banner

{
    "url": "https://example.com",
    "css": ".cli-modal-backdrop, #cookie-law-info-bar { display: none !important; }"
}

Removing Other Common Elements

Chat Widgets

{
    "url": "https://example.com",
    "css": ".intercom-frame, #drift-frame, #crisp-chatbox, .fb_dialog, #chat-widget { display: none !important; }"
}

Newsletter Popups

{
    "url": "https://example.com",
    "css": ".newsletter-popup, .signup-modal, #subscribe-modal { display: none !important; }"
}

Fixed Headers

{
    "url": "https://example.com",
    "css": ".fixed-header, .sticky-header { position: relative !important; }"
}

Enhancing Screenshot Quality

Dark Mode Compatibility

{
    "url": "https://example.com",
    "css": "@media (prefers-color-scheme: dark) { body { background: white !important; color: black !important; } }"
}

Improved Text Rendering

{
    "url": "https://example.com",
    "css": "* { text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; }"
}

Disable Animations

{
    "url": "https://example.com",
    "css": "* { animation: none !important; transition: none !important; }"
}

Common values

• Cookie banner removal selectors - #onetrust-banner-sdk, #CybotCookiebotDialog, .qc-cmp2-container { display: none !important; } covers the major consent providers.
• Ad slot hiding - [id^="google_ads_"], [id^="ad-slot"] { display: none !important; } strips ad placeholders from screenshots.
• Sticky header removal - .sticky-header, header[role="banner"] { position: static !important; } flattens fixed nav so it does not duplicate when paired with fullpage.
• Body padding override - body { padding-top: 0 !important; } removes spacer padding that sites add to compensate for fixed nav.

When to use

Use css whenever you need to render a page that is not yours and the page contains visual elements you do not want in the screenshot. The most common reason is removing cookie consent banners. Less commonly, use it to override fonts, force light mode, or pause animations so a single frame captures cleanly.

Common mistakes

• Forgetting !important. The page’s own styles often have higher specificity than what you inject. Add !important on every declaration.
• Hiding the wrong element. Cookie banners often nest inside a wrapper. Use the testing guide to find the right selector before committing.
• Stripping content the layout depends on. Hiding a sticky header with display: none can collapse the page layout. Use position: static instead so it occupies its place but does not stick.

See also: twitter-embed example, facebook-post example, instagram-post example, and the getting started guide.