Table of Contents
Want to color each column in a Carrd container separately? Carrd doesn’t let you do this directly, but you can do it with some custom CSS.
Heads up: This will only color the column backgrounds up to the height of their content. It won’t fill the full vertical space unless you force height with extra CSS (not covered here).
Requires at least Carrd Pro Standard for the Embed element.
Step-by-step
- Assign an ID to your container. In Carrd, click your Container → go to Settings > Element → give it an ID (e.g., container1).
- Add an Embed element.
- Add an Embed to your page. Set it to Hidden and Head.
- Paste in this CSS (edit to match your ID and colors):
- Replace
container1with whatever ID you set. - Change the colors to whatever you want.
- Add or remove lines for more or fewer columns (use
nth-child(4), etc.)
<style>
#container1.columns > .wrapper > .inner > div:nth-child(1) { background-color: red; }
#container1.columns > .wrapper > .inner > div:nth-child(2) { background-color: green; }
#container1.columns > .wrapper > .inner > div:nth-child(3) { background-color: gray; }
</style>
Publish the site, and your columns should each have their own background color (will only show on the front end).
Optional extras
- Adjust the Margins on your Container for gaps between columns.
- Add more CSS to force the heights of the columns to be the same, or a minimum height.
We hope you liked this tutorial. Check out other Carrd tips & tricks or our templates.
Written by
