---
id: 61a5bfe091060f1d6a629dd0
title: Paso 64
challengeType: 0
dashedName: step-64
---

# --description--

Incluso sin las paradas de color, habrás notado que los colores en el marcador verde transicionan en los mismos puntos que en el marcador rojo. El primer color está al comienzo (0%), el segundo en el centro (50%) y el último al final (100%) de la línea del gradiente.

La función `linear-gradient` calcula de forma automática estos valores, repartiendo equitativamente los colores a lo largo de la línea del gradiente.

En la regla CSS `.red`, elimina las tres paradas de color de la función `linear-gradient`, quedando el código un poco más limpio.

# --hints--

La regla CSS `.red` debe tener la propiedad `background` establecida a `linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`.

```js
assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))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(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
}
--fcc-editable-region--

.green {
  background: linear-gradient(180deg, #55680D, #71F53E, #116C31);
}

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

```
