Framer Classic » Layers » Background color

Background color

Framer’s default background color is a transparent gray (in Code) or transparent blue (in Design).

But why is it backgroundColor, and not just color? Because of CSS. It refers to the background-color CSS property.

You can also set color, but that will change the color of the layer’s text (in the case of a Text Layer or HTML layer).

The value of backgroundColor has to be a string, but you can write it in any of the different CSS color formats.

Tip: Layers with a (transparent) image can at the same time have a color. You just have to make sure to pick anything but Framer’s default gray ("rgba(123, 123, 123, 0.5)").

# All of these describe the same color: lime green

# CSS Named Color
greenLayer.backgroundColor = "lime"

# Hex Code
greenLayer.backgroundColor = "#00ff00"

# Websafe Hex Code
greenLayer.backgroundColor = "#0f0"

# RGB Decimal
greenLayer.backgroundColor = "rgb(0,255,0)"

# RGBA Decimal, the last value is ‘alpha’ (opacity)
greenLayer.backgroundColor = "rgba(0,255,0, 1)"

# Hue Saturation Lightness
greenLayer.backgroundColor = "hsl(120,100%,50%)"

# Hue Saturation Lightness Alpha
greenLayer.backgroundColor = "hsla(120,100%,50%, 1)"
Download Framer project
A layer with a lime green background color

An empty layer’s transparent gray color has a use: It’s for making areas of your design tappable. You can create a layer, give it the correct size and position, and then set its background color to "transparent" to make it invisible. You then have a transparent ‘button’ that you can use to trigger an action.

backButton = new Layer
    width: 160, height: 44
    backgroundColor: "transparent"

Instead of "transparent" you can also use null (without quotation marks) or simply an empty string ("").

backButton = new Layer
    width: 160, height: 44
    backgroundColor: null
backButton = new Layer
    width: 160, height: 44
    backgroundColor: ""

By the way, the Colors chapter has info about changing and mixing colors.

The screen’s background color

Want to set the background color of the entire screen? Simple:

# Setting the color of the Screen
Screen.backgroundColor = "rgba(51, 204, 255, 1)"

When you can’t set the screen’s background color it’s probably because of a Design (or other imported) artboard being on top. Set the opacity of the artboard’s fill color to zero.


Leave a Reply