Backgrounds, Borders & Shadows

If you have opened Figma’s right-hand panel, you have already used these concepts. The Fill section maps to CSS backgrounds. The Stroke section maps to CSS borders. The Effects section maps to CSS shadows. The names are different, but the ideas are identical — and once you see the parallel, the properties click into place immediately.

Backgrounds — the Fill panel in CSS

The simplest background is a solid color. Use background-color with any color value: a hex code, an rgb(), or a named color.

.box {
  background-color: #7C3AED; /* purple — same as a solid fill in Figma */
}

For an image fill, use background-image with a url(). Pair it with two extra properties to match Figma’s fill mode:

.hero {
  background-image: url('image.jpg');
  background-size: cover;       /* fills the box and crops — Figma's "Fill" mode */
  background-position: center;  /* keeps the image centred */
}

background-size: contain is the other option — it fits the whole image inside the box without cropping, like Figma’s “Fit” mode.

Gradients

Gradients are set on background (not background-color). CSS has two main types, matching Figma’s gradient fills exactly.

Linear gradient — color flows along a straight line, defined by an angle:

background: linear-gradient(135deg, #667eea, #764ba2);

135deg is the angle (0deg = top to bottom, 90deg = left to right). You can add more color stops: linear-gradient(135deg, #667eea 0%, #764ba2 60%, #f093fb 100%).

Radial gradient — color radiates outward from a central point:

background: radial-gradient(circle, #f093fb, #f5576c);

Borders — the Stroke panel in CSS

The border shorthand sets width, style, and color in one declaration:

border: 2px solid #7C3AED;

The three values are always: width style color. Swap solid for dashed or dotted to change the stroke style. You can target individual sides:

border-top: 4px solid #7C3AED;
border-bottom: 1px dashed #d8b4fe;

Or use the longhand properties when you need finer control:

border-width: 2px;
border-style: solid;
border-color: #7C3AED;

Border-radius — corner radius

border-radius rounds the corners of any element, just like the corner radius field in Figma:

border-radius: 8px;   /* slightly rounded — common for cards */
border-radius: 16px;  /* more rounded */
border-radius: 50%;   /* perfect circle (works on square elements) */

You can set different radii per corner — the values go clockwise from top-left:

border-radius: 16px 4px 16px 4px; /* top-left, top-right, bottom-right, bottom-left */

Shadows — the Effects panel in CSS

box-shadow is Figma’s drop shadow effect, written in CSS. The value order is: x-offset, y-offset, blur-radius, spread-radius (optional), color:

box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12);

Stack multiple shadows by separating them with commas — useful for layered, realistic depth:

box-shadow:
  0 1px 3px rgba(0, 0, 0, 0.08),
  0 8px 24px rgba(0, 0, 0, 0.12);

For an inner shadow (same as Figma’s inner shadow effect), prefix the value with inset:

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

Opacity

opacity: 0.8 makes an entire element 80% transparent — including its text and children. If you only want to make the background transparent, use rgba() or hsla() on the color value instead:

/* Only the background becomes semi-transparent, text stays fully opaque */
background-color: rgba(124, 58, 237, 0.15);

HTMLCSS

<div class="showcase"> <div class="card card--gradient-a"> <span class="label">Linear Gradient</span> <p class="desc">background: linear-gradient</p> </div> <div class="card card--gradient-b"> <span class="label">Radial Gradient</span> <p class="desc">background: radial-gradient</p> </div> <div class="card card--solid"> <span class="label">Solid + Border</span> <p class="desc">background-color + border</p> </div> </div>

Try editing the CSS: change border-radius on .card from 20px to 4px to see sharp cards. Change the gradient angle on .card--gradient-a from 135deg to 45deg. Add border: 3px dashed white to .card--gradient-b. Every edit maps directly to a control you already know in Figma.

💡 Fill, Stroke, Effects — one-to-one with Figma

Backgrounds, borders, and shadows in CSS map one-to-one with Figma’s Fill, Stroke, and Effects panels. If you can set it in Figma’s design panel, there is a CSS property for it.

Which CSS property creates rounded corners?

border-style corner-radius border-radius border-curve

What is the CSS equivalent of a solid color fill in Figma?

color background-color fill background-fill

What does the `inset` keyword do in a `box-shadow` value?

Makes the shadow larger Moves the shadow to the outside of the element Creates an inner shadow, like Figma's inner shadow effect Removes the shadow entirely

How do you create a gradient background in CSS?

background-color: gradient(135deg, #667eea, #764ba2) background: linear-gradient(135deg, #667eea, #764ba2) background-image: gradient(purple, violet) fill: linear-gradient(#667eea, #764ba2)

Submit

Mark as complete