---
id: 61a4a7877da33a73a1c1723e
title: Hatua ya 57
challengeType: 0
dashedName: step-57
---

# --description--

Kwa kuwa sasa color-stops zimewekwa, utatumia vivuli tofauti vya rangi nyekundu kwa kila hoja ya rangi katika kitendakazi cha `linear-gradient`. Vivuli kwenye kingo za juu na chini za kialama zitakuwa nyeusi zaidi, huku zile za katikati zitakuwa nyepesi kana kwamba kuna mwanga juu yake.

Kwa hoja ya kwanza ya rangi, ambayo kwa sasa ni nyekundu kabisa, sasisha kitendakazi cha `rgb` ili thamani ya nyekundu iwe `122`, thamani ya kijani ni `74`, na thamani ya bluu ni `14`.

# --hints--

Sheria yako ya CSS ya `.red` inapaswa kuwa na sifa ya `background` iliyowekwa kuwa `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`.

```js
assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker red">
      </div>
      <div class="marker green">
      </div>
      <div class="marker blue">
      </div>
    </div>
  </body>
</html>
```

```css
h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

--fcc-editable-region--
.red {
  background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%);
}
--fcc-editable-region--

.green {
  background-color: #007F00;
}

.blue {
  background-color: hsl(240, 100%, 50%);
}

```
