How to add a transparent background to text and button in Squarespace
Adding a transparent background to text and buttons in Squarespace can elevate the overall aesthetic of your site. Whether you're placing text over an image, video, or a colored section, using transparency ensures your design feels modern and polished — while still keeping your content readable.
In this tutorial, we’ll guide you step-by-step on how to apply a transparent background to both text blocks and buttons using custom CSS. Please note this code works on both Squarespace 7.0 and 7.1.
A useful tool you can use to identify the #collection-id, #blockidnumber and section[data-section-id="#"] is a Chrome Extension called Squarespace ID Finder.
Table of Contents
Why Use a Transparent Background?
Creates a sleek and professional look.
Maintains text readability over complex images or videos.
Adds depth and layering to your design.
Makes your site stand out with modern visuals.
Complexity: Easy
Step-by-Step Instructions
Step 1
Identify the Block IDs for the text and button using the plugin mentioned above
Step 2
From your Squarespace account, go to the Custom CSS Editor and paste the code into the Pages > Custom Code > Custom CSS. Use this site https://rgbacolorpicker.com/ to create background rgba colours.
/* Transparent Background Colour */
#BLOCKID {
background: rgba(39, 106, 245, 0.1);
padding-top: 1.5vw;
}
#BLOCKID {
background: rgba(39, 106, 245, 0.1);
padding-bottom: 1.5vw;
}Step 3
Replace the #BLOCKID’s with the BLOCKID’s, for this example the BLOCKID’s are ‘#block-6c86a25d0b91bb9aaab2’ and ‘#block-189b0d62a9bfa9dadb7d‘.
/* Transparent Background Colour */
#block-6c86a25d0b91bb9aaab2 {
background: rgba(39, 106, 245, 0.28);
padding-top: 1.5vw;
}
#block-189b0d62a9bfa9dadb7d {
background: rgba(39, 106, 245, 0.28);
padding-bottom: 1.5vw;
}
Step 4
You can add some additional css to improve the transparent background.
/* Transparent Background Colour */
#block-6c86a25d0b91bb9aaab2 {
background: rgba(39, 106, 245, 0.28);
padding-top: 1.5vw;
border-radius: 20px 20px 0px 0px;
}
#block-189b0d62a9bfa9dadb7d {
background: rgba(39, 106, 245, 0.28);
padding-bottom: 1.5vw;
border-radius: 0px 0px 20px 20px;
}
Key Takeaways
Use
rgba()values to set background colors with transparency.Apply custom classes to specific text blocks for flexibility.
Transparent buttons look great over hero images or video backgrounds.
FAQs
Will this affect buttons site-wide?
Yes — unless you specifically target individual buttons using custom classes.
Can I add this to mobile only?
Yes! Wrap your CSS in a media query.
Q: Can I change the opacity on hover?
Yes. Use the :hover pseudo-class to increase or decrease background opacity.
Conclusion
Transparent backgrounds on text and buttons can instantly modernize your Squarespace site. With just a few lines of CSS, you’ll gain greater design flexibility and create a more immersive user experience.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, we recommend that you purchase the services of a developer.
