DEV Community

Cover image for [EN-US] Creating a background-gradient with 3 lines of Pure-CSS
Juliana Gaioso
Juliana Gaioso

Posted on • Updated on

[EN-US] Creating a background-gradient with 3 lines of Pure-CSS

para ler o artigo em português, [clique aqui](https://www.linkedin.com/pulse/criando-background-gradiente-com-3-linhas-de-pure-css-juliana-gaioso/?published=t)

First, let's see the code, and then analyze it.
Alt Text
The background-image property create a background element. Now, we have two problems: first, some browsers don't recognized the property linear-gradient. This is easily adjusted with the property background-color, that in this case show a solid color. Second: for definition, the gradient repeats until it occupies the entire screen if the area of ​​the element is larger than the area occupied by the content (in the gradient direction). Thats adjusted with the property background-repeat, this determines that the property is executed only once. In this case, the rest of the element area will display the color of the background-color, used in the second line, so it is important to use the same color in the background as the outermost region of the gradient.

To see the code working, click here

Top comments (0)