How to add a background in Carrd

By David Nge • Last Updated: November 21, 2022

Carrd offers a quick and easy way  for you to add a background (or build your site for that matter).

Here are 3 ways to set a background in Carrd:

There's a bunch of free resources to help you get the most of this handy Carrd feature, such as color picker, gradient tool, and free stock videos, so be sure to check those out.

If you need Carrd website inspirations, here are 28 Carrd website (hand-picked) examples. From K-pop fan pages, personal portfolio website, marketing landing pages, to simple one page business websites. There's something for everyone.

💡
Carrd is currently running a whopping 40% Black Friday discount on the Pro plan. Get it while it lasts.

Enjoy!

How to change the background color

1. Open the background element

Click anywhere outside of the page element.

Click outside of the page element to pull up the background element
Click outside of the page element to pull up the background element

You will see the background element pull out from the left.

The Carrd background element
The Carrd background element

2. Change the background color

Select the color element under Style.

Change the Carrd background color
Change the Carrd background color

Then drag the color picker cursor to change the background color.

Drag the color picker to change the background color
Drag the color picker to change the background color

3. Pick an awesome color

Choosing a color can be a daunting task especially if you don't have a design background. Luckily, there are plenty of tools to help choose a color palette for your site.

If you need color inspiration, Coolors is a great tool to generate thousands of beautiful color schemes.

If you're serious about learning design, then Erik has some great tips on how to choose color if you're designing a user interface, or any website for that matter.

Click Done when you're happy with the new background color.

How to add a gradient background

Gradient is when you see a smooth transition from one color to another. The Carrd home page has a pretty slick gradient background!

Carrd homepage gradient background
Carrd homepage gradient background

Let's add one ourselves.

1. Open the background element

Click anywhere outside of the page element.

Click outside of the page element to pull up the background element
Click outside of the page element to pull up the background element

You will see the background element pull out from the left.

Carrd background element
Carrd background element

2. Select gradient style background

Hover to the background style dropdown menu and select Gradient.

Change the background style to Gradient
Change the background style to Gradient

3. Customizing the gradient

Once you've selected the gradient tool. You will see a few settings that allow you to customize the gradient:

Update the colour code for the gradient.

Customizing the gradient background color
Customizing the gradient background color

If you need inspiration for a gradient color, just use uiGradient. It'll show you   gorgeous gradients (with hillarious names) along with the color code that you can copy-paste into Carrd.

uiGradient Color Code
uiGradient Color Code

Click Done when you're happy with the new gradient background.

How to add a video background

1. Open the background element

Click anywhere outside of the page element.

Click outside of the page element to pull up the background element
Click outside of the page element to pull up the background element

You will see the background element pull out from the left.

Carrd background element
Carrd background element

2. Select video style background

Hover to the background style dropdown menu and select video.

Change the background style to Video
Change the background style to Video

3. Upload a video

Click the upload button and select a MP4 video (up to 16mb) from your computer or phone.

Upload a video background
Upload a video background

If you're looking for free stock video resources, then Pexels has a great selection of community-supported, free-to-use stock videos to choose from.

Tip: Since Carrd has a 16mb size limit for the video upload, it's recommended that you download smaller file format from Pexels.

Pexels file size selection
Pexels file size selection

That's it! Adding a background in Carrd is relatively simple. If you need Carrd website inspiration. Here are 28 hand-picked personal & professional Carrd websites to inspire you.

Good luck!