Problem with css gradient

I have a problem whit the background of my survey form page, it’s just a gradient, but it appears over the page changing the color of all elements in the document, i don’t know why and I need help, thanks.

This is the link of the code in codepen:

Hello there.

I have moved your post to a more suitable sub-forum.

If you have a question about a specific challenge as it relates to your written code for that challenge, just click the Ask for Help button located on the challenge. It will create a new topic and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

To answer your question:

It appears like that because you have set the form to have an opacity of less than 1. So, the background shines through.

Also, some things to note when using CodePen:

  1. CodePen does not expect any content outwith the body tags.
  2. All meta, link, and script information must be put in the :gear: settings section of the HTML editor.
  3. You do not need to/cannot link the CSS in your HTML, if you place the CSS in the appropriate section.
  4. If your project uses React, use the Babel preprocessor, and link the CDN in the appropriate :gear: section.
  5. The editors offer the ability to format and analyse your code, providing useful information about forgotten closing tags etc.

If you are still confused with how to use CodePen, please read the official documentation.

Hope this helps