---
id: 61a49d15bdbb5e57cc6fd280
title: Paso 54
challengeType: 0
dashedName: step-54
---

# --description--

Las paradas de color permiten afinar el emplazamiento de los colores a lo largo de la línea que sigue el gradiente. Se definen, en la función `linear-gradient`, mediante unidades de longitud, como `px` o porcentajes, a continuación del color del cual se quiere definir la parada.

Por ejemplo, en el gradiente que sigue, la transición del rojo al negro tiene lugar en el punto que representa el 90% de la línea del gradiente, de manera que el rojo ocupa la mayor parte del espacio disponible:

```css
linear-gradient(90deg, red 90%, black);
```

En la función `linear-gradient`, añade una parada de color en el `75%` después del primer argumento de color, el rojo. No añadas paradas de color en los otros argumentos de color.

# --hints--

La regla CSS `.red` debe tener la propiedad `background` establecida a `linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`.

```js
assert.include(['linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))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(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255));
}
--fcc-editable-region--

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

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

```
