# A Problem with Linear gradient

**URL:** <https://forum.freecodecamp.org/t/a-problem-with-linear-gradient/505374>\
**Category:** Curriculum Help\
**Tags:** css, html\
**Created:** [April 19, 2022, 2:08pm UTC](https://forum.freecodecamp.org/t/a-problem-with-linear-gradient/505374 "2022-04-19T14:08:49Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sina.tr](https://avatars.discourse-cdn.com/v4/letter/s/c6cbf5/32.png) [@Sina.tr](https://forum.freecodecamp.org/u/Sina.tr)\
**Post date:** [April 19, 2022, 2:08pm UTC](https://forum.freecodecamp.org/t/a-problem-with-linear-gradient/505374/1 "2022-04-19T14:08:49Z")

</div>

## Why is this code not working?

```auto
<style>
    div{
      border-radius: 20px;
      width: 70%;
      height: 400px;
      margin: 10 auto;
    }

    .A {
        background: repeating-linear-gradient(
        90deg,
        yellow 5px,
        black 40px,
        green 40px,
        red 80px,
        );
        z-index: 1;
        position: relative;
        left: 10px;
    }

    .B {
        background: repeating-linear-gradient(
        90deg,
        black 5px,
        cyan 40px,
        blue 40px,
        pink 80px,
        );
        z-index: 2;
        position: relative;
        left: 30px;
    }

    h1 {
        background: rgba(42, 42, 119, 1);
    z-index: 3;
    }
  </style>

  <h1>WHY?</h1>
  <div class="A"> </div>
  <div class="B"> </div>

```

* * *

**Challenge:** Create a Gradual CSS Linear Gradient

**Link to the challenge:**

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![LucLH](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/luclh/32/246602_2.png) [@LucLH](https://forum.freecodecamp.org/u/LucLH)\
**Post date:** [April 19, 2022, 2:50pm UTC](https://forum.freecodecamp.org/t/a-problem-with-linear-gradient/505374/2 "2022-04-19T14:50:45Z")

</div>

Hi @Sina.tr,

According to the original code for this challenge, you added too much things. You need to add only what is asked in the exercice. Here, you only need to add a `background` property for the `div` selector.

If you are testing things with this CSS code, you can share with us the HTML code you did too.

---

<div class="post-metadata">

**Author:** ![belghiti.brahim](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/belghiti.brahim/32/240293_2.png) [@belghiti.brahim](https://forum.freecodecamp.org/u/belghiti.brahim)\
**Post date:** [April 19, 2022, 2:54pm UTC](https://forum.freecodecamp.org/t/a-problem-with-linear-gradient/505374/3 "2022-04-19T14:54:01Z")

</div>

the code is correct but assignment is:  
Use a `linear-gradient()` for the `div` element’s `background`.

---

<div class="post-metadata">

**Author:** ![Sina.tr](https://avatars.discourse-cdn.com/v4/letter/s/c6cbf5/32.png) [@Sina.tr](https://forum.freecodecamp.org/u/Sina.tr)\
**Post date:** [April 19, 2022, 3:09pm UTC](https://forum.freecodecamp.org/t/a-problem-with-linear-gradient/505374/4 "2022-04-19T15:09:31Z")

</div>

Hi @LucLH,  
Actually I was testing some of the codes in VS to better understand the underlying concepts. But this one code didn’t work, only header tag worked.

 ![problem01](https://global.discourse-cdn.com/freecodecamp/original/4X/a/0/f/a0fec4be21aad25316f94fb55c0e870fbc6be499.png)

---

<div class="post-metadata">

**Author:** ![LucLH](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/luclh/32/246602_2.png) [@LucLH](https://forum.freecodecamp.org/u/LucLH)\
**Post date:** [April 19, 2022, 3:53pm UTC](https://forum.freecodecamp.org/t/a-problem-with-linear-gradient/505374/5 "2022-04-19T15:53:45Z")

</div>

I tested your code and I think the reason why you don’t see appear your backgrounds it is because you added a comma before the closing parenthesis for the `repeating-linear-gradient` methods used in your two selectors `A` and `B`.

Example:

```auto
.A {
  background: repeating-linear-gradient( 90deg, yellow 5px, black 40px, green 40px, red 80px, ); 
}

```

Remove these commas and it should be ok. Tell us if it is the result you were expecting. 🙂

---

<div class="post-metadata">

**Author:** ![ArielLeslie](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/arielleslie/32/264841_2.png) [@ArielLeslie](https://forum.freecodecamp.org/u/ArielLeslie)\
**Post date:** [April 19, 2022, 4:58pm UTC](https://forum.freecodecamp.org/t/a-problem-with-linear-gradient/505374/6 "2022-04-19T16:58:36Z")

</div>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (`</>`) to add backticks around text.

 ![Pre-formatted-text](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif)

See [this post](https://forum.freecodecamp.org/t/forum-code-formatting/25574) to find the backtick on your keyboard.  
**Note:** Backticks (`) are not single quotes (’).

---

<div class="post-metadata">

**Author:** ![Sina.tr](https://avatars.discourse-cdn.com/v4/letter/s/c6cbf5/32.png) [@Sina.tr](https://forum.freecodecamp.org/u/Sina.tr)\
**Post date:** [April 19, 2022, 6:12pm UTC](https://forum.freecodecamp.org/t/a-problem-with-linear-gradient/505374/7 "2022-04-19T18:12:04Z")

</div>

Thank you so much @LucLH , now that the "div"s showed up I can explore more about colors and relative & absolute positioning.

---

<div class="post-metadata">

**Author:** ![LucLH](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/luclh/32/246602_2.png) [@LucLH](https://forum.freecodecamp.org/u/LucLH)\
**Post date:** [April 19, 2022, 8:31pm UTC](https://forum.freecodecamp.org/t/a-problem-with-linear-gradient/505374/8 "2022-04-19T20:31:34Z")

</div>

You’re welcome @Sina.tr. Have a good exploration in the CSS world 🙂

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [October 19, 2022, 8:32am UTC](https://forum.freecodecamp.org/t/a-problem-with-linear-gradient/505374/9 "2022-10-19T08:32:18Z")

</div>

Closed on October 19, 2022, 8:32am UTC

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.