1

I have this div:

<div class="sh-continer-fluid bg-blue"><div>

I want to style 25% of this div to blue color and 75% of div to white color. so, I am doing it using CSS:

.bg-blue {
    background-color: #5366ea;
    background: linear-gradient(90deg, #FFC0CB 25%, #00FFFF 75%);
}

But it's showing me floating gradient color. I need solid gradient color. Any idea?

Not this:

enter image description here

I mean this:

enter image description here

Shibbir
  • 1,963
  • 2
  • 25
  • 48
  • Hi! please check this link if its helpful for you https://stackoverflow.com/questions/45097591/generate-solid-colors-using-css-linear-gradient-not-smooth-colors – Jaswinder Kaur Jun 03 '22 at 05:39
  • https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient search the page for "hard line" – Spencer May Jun 03 '22 at 05:41

1 Answers1

0

You could try something like this:

.bg-blue {
  width: 100%;
  height: 25px;
  background: -moz-linear-gradient(left, blue 75%, white 25%);
  background: -webkit-linear-gradient(left, blue 75%, white 25%);
  background: linear-gradient(to right, blue 25%, white 25%);
}

I've put the height just for testing, you can adjust it as you want then.

Student_GA
  • 24
  • 3
  • You don't need prefixes for gradient anymore, like `-moz-linear .. -webkit-linear` Unless you want to support 10 year old browsers. You can remove this from the CSS. – cloned Jun 03 '22 at 05:58