Diagonal Gradient in CSS

CSS3 gradient diagonal how to apply?

I found this, works great. http://www.colorzilla.com/gradient-editor/

I got some code which you can use as a template.

background: #1e5799; /* Old browsers */

background: -moz-linear-gradient(-45deg,  #1e5799 0%, #2989d8 50%, #207cca 63%, #7db9e8 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(63%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(-45deg,  #1e5799 0%,#2989d8 50%,#207cca 63%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(-45deg,  #1e5799 0%,#2989d8 50%,#207cca 63%,#7db9e8 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(-45deg,  #1e5799 0%,#2989d8 50%,#207cca 63%,#7db9e8 100%); /* IE10+ */

background: linear-gradient(135deg,  #1e5799 0%,#2989d8 50%,#207cca 63%,#7db9e8 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

How to create a diagonal gradient background with CSS

Updated: Manage to solve it. Just by adding extra color code to it.

<div style="background: -webkit-linear-gradient(256deg, #fff 53%, #6d87bf 20%, #011520 100%); height:300px">
</div>

How to draw a perfect diagonal with linear-gradient

You can use a to [side] [side] linear gradient which is transparent except for the thickness of the diagonal like in the below snippet.

(Border is added only for demo and is not actually required for the gradient to work.)

div {  display: block;  width: 100px;  height: 100px;  border: 1px solid;  margin: 10px;}.border-2px {  background: linear-gradient(to bottom left, transparent calc(50% - 2px), red calc(50% - 1px), red calc(50% + 1px), transparent calc(50% + 2px)) no-repeat 0px 0px / 100px 100px;}.border-1px {  background: linear-gradient(to bottom left, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px)) no-repeat 0px 0px / 100px 100px;}.border-1px.small {  height: 10px;  width: 10px;  background: linear-gradient(to bottom left, transparent calc(50% - .5px), red 50%, transparent calc(50% + .5px)) no-repeat 0px 0px / 10px 10px;}.border-1px.small-2 {  height: 10px;  width: 10px;  background: linear-gradient(to bottom left, transparent calc(50% - 1px), #EEE calc(50% - .5px), red 50%, #EEE calc(50% + .5px), transparent calc(50% + 1px)) no-repeat 0px 0px / 10px 10px;}.border-1px.small-3 {  background: linear-gradient(to bottom left, transparent calc(50% - .5px), red 50%, transparent calc(50% + .5px)) no-repeat 0px 0px / 10px 10px;}.border-1px.small-4 {  background: linear-gradient(to bottom left, transparent calc(50% - 1px), #EEE calc(50% - .5px), red 50%, #EEE calc(50% + .5px), transparent calc(50% + 1px)) no-repeat 0px 0px / 10px 10px;}

<div class='border-2px'></div><div class='border-1px'></div><div class='border-1px small'></div><div class='border-1px small-2'></div><div class='border-1px small-3'></div><div class='border-1px small-4'></div>

How to create a diagonal gradient background on CSS?

you can use linear-gradient value for background

first parameter is the degree of the gradient
then you have to place
one color with percentage of space take in gradient color

to perform what you expect i can advice you 3 point

.middle-gradient div {
  padding: 50px;
  border: solid 1px;
  flex: 0 0 10%
}

.middle-gradient {
  background: blue;
  border: solid 1px;
  padding: 50px;
  display: flex;
  justify-content: center;
  gap: 5%;
  width 100%;

  background: linear-gradient(160deg, rgba(255,255,255,1) 28%, rgba(0,0,255,1) 28% 66%, rgba(255,255,255,1) 66%);
}

<div class="middle-gradient">
  <div>test</div>
  <div>test</div>
  <div>test</div>
</div>

CSS Diagonal Gradient with white space

Keep a straight gradient and rely on clip-path to create the shape:

html:before {
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(red,blue);
  clip-path:polygon(50% 0,100% 0,50% 100%,0 100%)
}

How to get the Linear Gradient diagonal effect multiple times?

You can consider multiple background like below:

body {  margin:0;  height:100vh;  background:    linear-gradient(to top left, transparent 49.8%,rgba(0,0,0,0.3) 50%),    linear-gradient(to top right,transparent 49.8%,rgba(0,0,0,0.3) 50%),    url(https://picsum.photos/1000/800?image=1069);  background-size:    50% 100%,    50% 100%,    cover;}

Changing text color on 2 sides of diagonal gradient line in html

You can do it wrapping the text in a <p> tag and setting a linear-gradient to this tag.

button{   background: linear-gradient(140deg, #00C9FF 35%, transparent 35%);   color: white;   font-size: 30px;}
p{  margin: 0;  font-size: 50px;  background: -webkit-linear-gradient(130deg, red 65%, black 15%);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}

<button type="button"><p>some long text</p></button>