---
title: "css parameter"
description: "Inject CSS to override styles, hide elements or remove cookie banners before render."
url: "https://html2img.com/docs/parameters/css/"
---

# 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.

> **Note**
>
> `css` applies to PDF renders too: injected styles take effect before the page is laid out onto A4 pages when [`format`](https://html2img.com/docs/parameters/format/) is `pdf`.

## 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
```json
{
    "html": "<div class='container'><h1>Hello World</h1></div>",
    "css": ".container { padding: 20px; background: #f0f0f0; } h1 { color: blue; }"
}
```

### Modifying Screenshot Styles
```json
{
    "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
```json
{
    "url": "https://example.com",
    "css": "#cookieBanner, #cookie-banner, .cookie-notice, .cookie-consent, .cookie-popup, #gdpr-banner, .gdpr-banner { display: none !important; }"
}
```

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

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

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

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

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

## Removing Other Common Elements

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

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

### Fixed Headers
```json
{
    "url": "https://example.com",
    "css": ".fixed-header, .sticky-header { position: static !important; }"
}
```

## Enhancing Screenshot Quality

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

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

### Disable Animations
```json
{
    "url": "https://example.com",
    "css": "* { animation: none !important; transition: none !important; }"
}
```

> **Warning**
>
> Injected rules usually need `!important` to beat the page's own specificity - but an `!important` rule wins everywhere it matches, so keep selectors tight (target IDs or specific classes, not bare tags) to avoid restyling more of the page than you intended.

> **Note**
>
> Test your CSS selectors on the target website first, as element selectors may change over time or vary between different versions of the website.

## 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](https://html2img.com/docs/testing/) 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](https://html2img.com/docs/examples/twitter-embed/), [facebook-post example](https://html2img.com/docs/examples/facebook-post/), [instagram-post example](https://html2img.com/docs/examples/instagram-post/), and the [getting started guide](https://html2img.com/docs/getting-started/).

## Templates that use this parameter

Typography-heavy templates lean on custom CSS to load brand fonts and tune the layout:

- [Blog hero image template](https://html2img.com/templates/blog-hero/)
- [Quote card template](https://html2img.com/templates/quote-card/)
- [Podcast cover template](https://html2img.com/templates/podcast-cover/)