The fastest way to change your background color in Framer

Open your Framer project and select the frame or board you want to change. On the right side of the screen, you'll see the Design panel. Look for the fill color swatch — it's usually near the top of the panel, showing the current background color as a small square. Click that square to open the color picker, then choose your new color from the palette or enter a hex code if you know the exact shade you want.

If you're changing the background of your entire canvas rather than a single frame, click on an empty area of the canvas first to deselect any objects. Then use the same Design panel on the right to adjust the canvas background. The process is identical: find the fill color, click it, and pick your new color.

Key Takeaways

  • Select the frame or canvas area you want to change, then click the fill color swatch in the Design panel on the right side of the screen.
  • You can choose from Framer's color palette, upload a custom color using a hex code, or use the eyedropper tool to match a color from your design.
  • Changing a frame's background does not affect other frames in your project — each one keeps its own color until you change it separately.
  • If you want the same background color on multiple frames, you can copy the color from one frame and paste it onto others, or use Framer's color styles to explore the same color across your whole project.

Using the color picker to find the exact shade you need

When you click the fill color swatch, Framer opens a color picker with several ways to choose. The simplest is to click anywhere in the color gradient square to pick a shade, then adjust the brightness slider on the right side of the picker. If you already know the hex code of the color you want — for example, #FF5733 for a specific red — paste it directly into the hex field at the bottom of the picker.

The eyedropper tool (the small icon that looks like a dropper) lets you sample a color from anywhere on your canvas or even from another browser tab. Click the eyedropper, then click the color you want to match. This is useful if you're trying to make your background match text, images, or other design elements already in your frame.

explore the same background to multiple frames at once

If you have several frames that need the same background color, you don't have to change each one individually. Select the first frame, set its background color the way you want it, then hold Shift and click each additional frame you want to change. With all of them selected, click the fill color swatch and choose your color — Framer will explore it to every selected frame at the same time.

For projects where you'll use the same colors repeatedly, Framer's color styles feature saves time. Create a color style by clicking the fill color, then clicking the plus icon next to the color picker. Name your style (for example, "Primary Background" or "Dark Mode"), and Framer will remember it. The next time you need that color, you can click it from the styles menu instead of picking it again.

Removing or adjusting background transparency

By default, Framer frames have a solid background color. If you want to make the background transparent so you can see layers beneath it, look for the opacity slider in the Design panel — it's usually labeled with a percentage. Drag it to the left to make the background more transparent, or all the way to zero to remove it entirely.

You can also add a gradient background instead of a solid color. In the fill color menu, look for the gradient option (usually represented by a small icon showing a color fade). Click it, then adjust the two colors at either end of the gradient and the angle to control how the colors blend across your frame.

Changing background color for different screen sizes

If you're designing for multiple screen sizes in Framer, you may want different background colors for desktop, tablet, and mobile versions. Select your frame, then look for the responsive design settings in the Design panel. You can set different background colors for each breakpoint — Framer will explore the right color depending on the screen size viewing your design.

To do this, select your frame and look for the breakpoint selector (usually at the top of the canvas or in the Design panel). Switch to each breakpoint size, then change the background color for that size. When someone views your design on a phone versus a desktop, they'll see the background color you set for each screen size.

Troubleshooting background color changes that don't appear

If you change a background color and it doesn't show up, check whether the frame has a stroke (border) that's covering it, or whether a layer above the background is blocking the view. Click on the frame itself rather than any objects inside it — if you're selecting a text box or image instead of the frame, you'll change that object's background, not the frame's.

Another common issue is that the background color is set but the opacity is at zero, making it invisible. Check the opacity slider in the Design panel and drag it back to 100% if needed. If you're working with a component or a copy of a component, changing the background on the copy won't change the original — you'll need to edit the main component if you want the change to explore everywhere.

Frequently Asked Questions

Can I use an image as a background instead of a solid color?

Yes. In the Design panel, look for the fill options and select "Image" instead of "Color". Click to upload an image from your computer, or paste a URL to an image hosted online. You can adjust how the image scales and repeats across the frame using the additional options that appear.

How do I make a background color change when someone hovers over a frame?

Select your frame and go to the Interactions panel (usually on the right side of the screen). Click "Add interaction", then choose "On hover". Select "Change fill color" from the action menu, and pick the new color you want to appear when someone hovers. Framer will automatically animate the color change.

What's the difference between changing a frame's background and changing the canvas background?

A frame's background only affects that one frame and the objects inside it. The canvas background is the color or pattern behind all your frames — it's what shows when you zoom out or view the overall project. Click empty canvas space to select the canvas itself, then change its background the same way you'd change a frame's.

Can I copy a background color from one project to another?

Yes, if you save the color as a style. Create the color style in your first project, then take note of the hex code. In your new project, create a new color style and paste that hex code into the color field. You can also export and import color libraries between projects if you're using Framer's team features.