CSS Gradient Color Blocks

Question

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.

lol its called gradient for a reason

m0bi5
– m0bi5

2015-02-17 15:37:35 +00:00
Commented Feb 17, 2015 at 15:37 — m0bi5
– m0bi5, Commented Feb 17, 2015 at 15:37

Jackson · Accepted Answer · 2015-02-17 15:39:57Z

1

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);
  }

answered Feb 17, 2015 at 15:39

Jackson

3,5382 gold badges21 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3097331 Over a year ago

This is great. I totally forgot about using pseudo elements. Thanks @jackson!

Paulie_D · Accepted Answer · 2015-02-17 15:40:32Z

1

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;
}

answered Feb 17, 2015 at 15:40

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

Collectives™ on Stack Overflow

CSS Gradient Color Blocks

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related