Split Color Section Background

Want your section background to be two different colors?

You can check out a few live variations of this here!

Instructions

1. Copy and paste the following code to Custom CSS.

// Split Color Section Background //

SECTION_ID_HERE.page-section .section-background {

background: linear-gradient(90deg, #fff 50%, #113F53 50%) !important;

}

2. Use the Squarespace ID Finder to find your section ID, and add it where it says SECTION_ID_HERE in the code. It will look something like this: section[data-section-id="66f200ee8f72710383ea3cad"]

3. Voila! You’re done!

Customizations

  • Change the value before deg to change the angle of the dividing line

  • Change the values after the hashtags (#) to change the colors (you can find color values by using tools like ColorSlurp or HTML Color Codes.

License

This plugin comes with an Unlimited Use License. View License Terms


Was this post helpful? Consider buying me a coffee to say thanks!

Next
Next

Highlight on Hover Navigation