CODEWITHSUNDEEP
htmlcsslinear-gradients
user3097331
user3097331

Reputation: 129

CSS Gradient Color Blocks

I want to set the body of my page with two different colors. The top 25% will be a dark red and the remaining 75% will be white.

I was using a background image to replicate the 25% dark red part. So the image below is what it looked like.

clean, cut speration between colors

But I was wondering if I replicate this using CSS gradients? As you can look very closely or apply it, the code doesn't result in a clean separation between of the colors. There's a little bit of gradient there.

when executed, the gradient is clearly visible.

Here is my CSS.

body {
    background: rgb(125, 12, 14);
    background: -moz-linear-gradient(90deg, rgb(125, 12, 14) 29%, rgb(255, 255, 255) 0%);
    background: -webkit-linear-gradient(90deg, rgb(125, 12, 14) 29%, rgb(255, 255, 255) 0%);
    background: -o-linear-gradient(90deg, rgb(125, 12, 14) 29%, rgb(255, 255, 255) 0%);
    background: -ms-linear-gradient(90deg, rgb(125, 12, 14) 29%, rgb(255, 255, 255) 0%);
    background: linear-gradient(180deg, rgb(125, 12, 14) 29%, rgb(255, 255, 255) 0%);
}

So to reiterate, is there a way I can write the CSS code so that there is a clean, cut separation of the two color blocks using CSS gradients? Other CSS methods welcome as well.

Upvotes: 0

Views: 1599

Answers (2)

Paulie_D
Paulie_D

Reputation: 115061

Your image is a little unclear but you can duplicate the color stop.

html {
  min-height: 100%;
}
body {
  height: 100%;
  background: linear-gradient(rgb(125, 12, 14) 29%, rgb(255, 255, 255) 29%, rgb(255, 255, 255));
  background-repeat: no-repeat;
}

Upvotes: 1

Jackson
Jackson

Reputation: 3518

You could use the :before pseudo element on the body to position a red block at the top.

body:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 75%;
  background-color: rgb(106, 0, 0);
  }

Upvotes: 1

Related Questions