Use Linear Gradient in CSS to Split Div in 2 Colors But Not in Equal Halves

Use linear gradient in CSS to split div in 2 colors but not in equal halves

i think this code will make effect like your screen shot.

put this code in selector you want too look like the screen shot.

  background-color: #f87f73;
  background-image: -webkit-linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);
  background-image: linear-gradient( -28deg, #f87f73 0%, #f87f73 60%, #292423 60%, #292423 60%);

CSS gradient split div into to halves from left bottom to top right

Yes, you can do. With 'to right bottom' and remove the angle.

div {

  background: rgb(255,255,255);

  background: linear-gradient(to right bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(255,0,4,1) 50%,rgba(249,0,4,1) 100%); 

  height:200px;

}

<div>

</div>

How can I create a css background that is split in 2 halves, and goes in different directions?

You can apply multiple gradients with different background-position and background-size.

Instead of having the two smaller gradients fade to solid color, you should change it to the rgba value with an alpha channel of 0. Then overlay them on top of the larger gradient, that way they colors will blend together as you move across horizontally.

Note the render order, the gradients declared first will appear on the top of the others.

Also, added no background-repeat so the first gradient doesn't render again over the second gradient.

JSFiddle

CSS

.actualgradient
{
    background-image: linear-gradient(to left, rgba(0,0,0,0) 0%, #FFA73D 100%),
                      linear-gradient(to left, rgba(0,0,0,0) 0%, #FF7E03 100%), 
                      linear-gradient(to bottom, #FFB463 0%, #FF7E03 100%);
    
    background-size: 100% 50%, 100% 50%, 100% 100%;
    background-position: 0 0, 0 100%, 0 0;
    background-repeat: no-repeat;
}

Splitting two linked buttons using CSS background color

The background color does not fill the div element.

It fills the div element; it fills the right element because that's the element you apply the background to.

I am not really sure if you want to have two different elements (divs/buttons) with 2 separate background-colors or you want the background-color added to a wrapper (parent) over the 2 elements.

See the below solution for the second option.

Gradient made with the help of cssgradient

.wrapper {
  display: flex;
  width: 200px;
  height: 42px;
  border-radius: 25px;
  background-color: rgb(255, 240, 64);
  background: linear-gradient(100deg, rgba(255, 240, 64, 1) 0%, rgba(255, 240, 64, 1) 50%, rgba(255, 114, 64, 1) 50%, rgba(255, 114, 64, 1) 100%);
  align-items: center;

}

.wrapper div {
  flex: 0 0 50%;
  text-align: center;
}

<div class="wrapper">
   <div class="left-part">right</div>
   <div class="right-part">left</div>
</div>

CSS Help for HR Stylying

You could use a linear gradient with multi-position color stops and a 135 degree angle:

hr {
  height: 0.25em;
  border: none;
  background: linear-gradient(135deg, yellow 0% 50%, purple 50% 100%);
}

<hr>

CSS: Set a background color which is 50% of the width of the window

Older Browser Support

If older browser support is a must, so you can't go with multiple backgrounds or gradients, you're probably going to want to do something like this on a spare div element:

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

Example: http://jsfiddle.net/PLfLW/1704/

The solution uses an extra fixed div that fills half the screen. Since it's fixed, it will remain in position even when your users scroll. You may have to fiddle with some z-indexes later, to make sure your other elements are above the background div, but it shouldn't be too complex.

If you have issues, just make sure the rest of your content has a z-index higher than the background element and you should be good to go.

---

Modern Browsers

If newer browsers are your only concern, there are a couple other methods you can use:

Linear Gradient:

This is definitely the easiest solution. You can use a linear-gradient in the background property of the body for a variety of effects.

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

This causes a hard cutoff at 50% for each color, so there isn't a "gradient" as the name implies. Try experimenting with the "50%" piece of the style to see the different effects you can achieve.

Example: http://jsfiddle.net/v14m59pq/2/

Multiple Backgrounds with background-size:

You can apply a background color to the html element, and then apply a background-image to the body element and use the background-size property to set it to 50% of the page width. This results in a similar effect, though would really only be used over gradients if you happen to be using an image or two.

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('http://i.imgur.com/9HMnxKs.png');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

Example: http://jsfiddle.net/6vhshyxg/2/

---

EXTRA NOTE: Notice that both the html and body elements are set to height: 100% in the latter examples. This is to make sure that even if your content is smaller than the page, the background will be at least the height of the user's viewport. Without the explicit height, the background effect will only go down as far as your page content. It's also just a good practice in general.

How to color a div half blue, half yellow?

You can do this:

Here is the JSFiddle demo

Snippet Example

 div{

     width:400px;

     height:350px;

     background: linear-gradient(to right, blue 50%, yellow 50%);

    }

<div></div>

Radial gradiant, split a section in two CSS ellipse shape

Not sure if this is the result you want but try using the clip-path property.

.super {
  background-color: red;
  height: 150px;
  clip-path: circle(50% at 89% 54%);
}

<section class="super">
   <div class="nice">
   </div>
 </section>

---

Related Topics