---
id: 646c5ace05e4be4211407935
title: Step 8
challengeType: 0
dashedName: step-8
---

# --description--

To see the `.cat-head` element, give it a linear gradient background with `#5e5e5e` at `85%` and `#45454f` at `100%`.

You might not notice the difference between these two colors, but they are there.

# --hints--

Your `.cat-head` selector should have a `background` property.

```js
assert.match(code, /background:/)
```

Your `background` property should use the `linear-gradient` function.

```js
assert.match(code, /background:\s*linear-gradient\(/)
```

Your `linear-gradient` function should set the first color to be `#5e5e5e` at `85%`.

```js
const gradientBackgroundImage = new __helpers.CSSHelp(document).getStyle('.cat-head')?.getPropVal('background-image', true);
const firstGradient = gradientBackgroundImage.split(/\s*rgb\s*/)[1];
assert.equal(firstGradient,'(94,94,94)85%,');
```

Your `linear-gradient` function should set the second color to be `#45454f` at `100%`.

```js
const gradientBackgroundImage = new __helpers.CSSHelp(document).getStyle('.cat-head')?.getPropVal('background-image', true);
const secondGradient = gradientBackgroundImage.split(/\s*rgb\s*/)[2];
assert.equal(secondGradient,'(69,69,79)100%)');
```


# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fCC Cat Painting</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <main>
      <div class="cat-head"></div>
    </main>
</body>
</html>
```

```css
* {
  box-sizing: border-box;
}

body {
  background-color: #c9d2fc;
}

--fcc-editable-region--
.cat-head {
  width: 205px;
  height: 180px;
  border: 1px solid #000;
  border-radius: 46%;

}
--fcc-editable-region--
```
