How to Divide Div Color With 30% Different Color and 70% Different Color in Vertical Using CSS

How can apply multiple background color to one div

The A div can actually be made without :before or :after selector but using linear gradient as your first try. The only difference is that you must specify 4 positions. Dark grey from 0 to 50% and ligth grey from 50% to 100% like this:

background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%);

As you know, B div is made from a linear gradient having 2 positions like this:

background: linear-gradient(to right,  #9c9e9f 0%,#f6f6f6 100%);

For the C div, i use the same kind of gradient as div A ike this:

background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);

But this time i used the :after selector with a white background like if the second part of your div was smaller. * Please note that I added a better alternative below.

Check this jsfiddle or the snippet below for complete cross-browser code.

div{    position:relative;    width:80%;    height:100px;    color:red;    text-align:center;    line-height:100px;    margin-bottom:10px;}
.a{    background: #9c9e9f; /* Old browsers */    background: -moz-linear-gradient(left,  #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); /* FF3.6+ */    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#f6f6f6), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */    background: -webkit-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */    background: -o-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Opera 11.10+ */    background: -ms-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* IE10+ */    background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* W3C */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */}
.b{    background: #9c9e9f; /* Old browsers */    background: -moz-linear-gradient(left,  #9c9e9f 0%, #f6f6f6 100%); /* FF3.6+ */    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */    background: -webkit-linear-gradient(left,  #9c9e9f 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */    background: -o-linear-gradient(left,  #9c9e9f 0%,#f6f6f6 100%); /* Opera 11.10+ */    background: -ms-linear-gradient(left,  #9c9e9f 0%,#f6f6f6 100%); /* IE10+ */    background: linear-gradient(to right,  #9c9e9f 0%,#f6f6f6 100%); /* W3C */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */}
.c{        background: #9c9e9f; /* Old browsers */    background: -moz-linear-gradient(left,  #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%); /* FF3.6+ */    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#33ccff), color-stop(100%,#33ccff)); /* Chrome,Safari4+ */    background: -webkit-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Chrome10+,Safari5.1+ */    background: -o-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Opera 11.10+ */    background: -ms-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* IE10+ */    background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* W3C */    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#33ccff',GradientType=1 ); /* IE6-9 */}.c:after{    content:"";    position:absolute;    right:0;    bottom:0;    width:50%;    height:20%;    background-color:white;}

<div class="a">A</div><div class="b">B</div><div class="c">C</div>

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>

Is it possible to have two background colors for a single html element?

Simply use linear-gradient as background and you can easily adjust the direction, colors, % of each color:

body {  margin: 0;  background: linear-gradient(to right, red 50%, blue 0%);    height:100vh;  text-align:center;  color:#fff;}

some content

Both horizontal and vertical gradient on background color

If you set the background-color to the red you can overlay it with a rectangle of the black which has, say, 60% width and 50% height and is positioned from the bottom.

div {
  --r: rgba(208, 6, 30, 1);
  --b: rgba(0, 0, 0, 1);
  display: inline-block;
  width: 50vmin;
  height: 30vmin;
  background-color: var(--r);
  background-image: linear-gradient(var(--b), var(--b));
  background-size: 60% 50%;
  background-position: left bottom;
  background-repeat: no-repeat;
}

<div></div>

Dynamically change color to lighter or darker by percentage CSS

All modern browsers have had 100% filter support since January 2020. Even UC Browser for Android (instead of Chrome, on the $80 phones) supports it.

a {
    /* a nice, modern blue for links */
    color: #118bee;
}
a:active {
    /* Darken on click by 15% (down to 85%) */
    filter: brightness(0.85);
}

Additionally, you can control this dynamically with CSS variables, which have been supported by most browsers since October 2017 (excluding QQ):

:root {
    --color: #118bee;
    --hover-brightness: 1.2;
}
a {
    color: var(--color);
}
a:active {
    /* Darken on click */
    filter: brightness(var(--hover-brightness));
}

Not my project, but one that's great to look at for a real-world example of how great modern CSS can be, check out: MVP.css

Original Answer

If you're using a stack which lets you use Sass or Less, you can use the lighten function:

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}

There's also darken which does the same, but in the opposite direction.