# Add CSS to Every Beaver Builder Layout

> Appends your own CSS to the stylesheet Beaver Builder generates for each layout, so it is cached and loaded together with the layout instead of on every page.

- Type: PHP
- Runs: Run everywhere
- Category: [Page Builders & Themes](https://wpide.com/library/category/page-builders/)
- Tags: beaver-builder, css, performance
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/beaver-builder-layout-css/

## Code

```php
// CSS added to each Beaver Builder layout stylesheet.
$wpide_bb_layout_css = '.fl-builder-content .fl-button{border-radius:999px;}.fl-builder-content .fl-module-heading .fl-heading{text-wrap:balance;}';

add_filter( 'fl_builder_render_css', function ( $css ) use ( $wpide_bb_layout_css ) {
    return $css . "\n/* Site additions */\n" . wp_strip_all_tags( $wpide_bb_layout_css );
} );
```

## Notes

Clear the Beaver Builder cache (Settings > Beaver Builder > Tools) after changing the CSS.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Add CSS to Every Beaver Builder Layout" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/