---
id: 5d822fd413a79914d39e98f0
title: Step 40
challengeType: 0
dashedName: step-40
---
# --description--
Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this:
```css
gradient-type(
color1,
color2
);
```
In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a gradient of type `linear-gradient` to the `background` property with `--building-color1` as the first color and `--window-color1` as the second.
# --hints--
You should apply a `background` to `.bb1a`.
```js
assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
```
You should give the `background` a `linear-gradient`.
```js
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
```
You should give the `background` a `linear-gradient` starting from `--building-color1`.
```js
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
```
You should give the `background` a `linear-gradient` ending at `--window-color1`.
```js
assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
```
# --seed--
## --seed-contents--
```html
City Skyline