How to make a multi-colored header-CodePudding

Very simple question, can you make a header like the one demonstrated in the quick MS paint image below? I don't know if this is possible in HTML/CSS and i'm relatively new to it all: https://i.stack.imgur.com/V5IuV.png

CodePudding user response：

#main {
  border: 2px solid black;
  width: 400px;
  height: 100px;
  background: linear-gradient(135deg, red 50%, white 0 100%);
}

<div id="main">
  <p>some text</p>
</div>

CodePudding user response：

Simpily add linear-gradient

You can make one by using CSS just put this in the element's CSS to make its background the multicolor you want. `background: rgb(131,58,180); background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);`

If you want to know how this works it is the linear-gradient that specifies multicolor

Snippit

.multi {
  border: 5px black;
  width: 700px;
  height: 200px;
  background: rgb(131,58,180);
  background: linear-gradient(130deg, rgba(131,58,180,1) 0%, rgba(252,176,69,1) 100%);
}

<div >
  <h2>Your custom text...</h2>
</div>

Some useful Links.

Css grandit generator: https://cssgradient.io/
W3scools explanation: https://www.w3schools.com/CSSref/func_radial-gradient.asp