bricks_add_custom_css

Phase 4.5BeginnerComplexity: 3/10

Add CSS to global or page scope (append mode)

Overview

Adds custom CSS globally (site-wide) or to a specific page. Supports append mode (add after existing CSS) or replace mode (overwrite entirely). Page scope requires a page_id. CSS is added without <style> tags.

Use this for CSS-only enhancements like glassmorphism effects, gradient backgrounds, noise textures, or custom cursor styles that don’t require JavaScript.

Key Features

Append or replace

Add to existing CSS or overwrite it completely

Dual scope

Add CSS globally (site-wide) or to a specific page

No style tags needed

Provide raw CSS — no <style> wrapper required

When to Use

Adding CSS-only design enhancements (gradients, glassmorphism, marquee animations)
Custom styling for Bricks native elements (tabs, accordion, slider)
Page-specific CSS overrides
After loading CDN CSS libraries, adding custom styles that complement them

Prerequisites

For page scope, you need the page_id
Check existing CSS first with bricks_get_custom_code to avoid conflicts

When NOT to Use

For styling individual elements — use global classes with bricks_create_global_class instead
For JavaScript — use bricks_add_custom_js instead
When a global class would be more maintainable than custom CSS

Parameters

4 Total Parameters3 Required1 Optional

cssstringREQUIRED

CSS code to add (without tags)

scopeenumREQUIRED

Where to add: "global" or "page"

Values: global, page

page_idnumberoptional

Page ID (required for page scope)

modeenumREQUIRED

Append to existing or replace entirely

Values: append, replace

Code Examples

Add glassmorphism class globally

Add a CSS-only glassmorphism effect

JSON

{
    "css": ".glass-card { background: rgba(255,255,255,0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2); border-radius: 16px; }",
    "scope": "global",
    "mode": "append"
}

Response

{"success": true}

Common Mistakes

Using custom CSS for styling that should be in global classes

Prefer global classes for reusable styles. Use custom CSS only for effects that can't be achieved through Bricks settings.

Tips & Warnings

Prefer CSS-only solutions over JS libraries when possible — faster and lighter
Common CSS enhancements: glassmorphism, gradient mesh, noise textures, marquee animations
After adding global CSS, call bricks_regenerate_assets to compile the static CSS file

Return Values

Field	Type	Description
`success`	boolean	Whether the CSS was added successfully

Related Tools

Technical Details

Tool ID

bricks_add_custom_css

API Endpoint

/bricks-mcp/v1/custom-code

HTTP Method

PUT

Namespace

wordpress-site

Source File

wordpress/custom-code.ts

Version

1.0

Min Bricks Version

1.9

Requires Auth

Yes

Changelog

v1.0

Initial release

20250101