Is it possible to divide the background colour into separate colours without adding div's, spans or images?

Question

The following code is a simple code whose body's background-color is black:

body {
background-color: black;
}

<html>
<body>
</body>
</html>

What if I want to divide the background-color in such a way that it has two different colors without adding div's or images? Like the following:

is it possible?

score 1 · Answer 1 · answered Aug 14 '21 at 08:59

1

Yes, It's possible, try this:

body {
    background: linear-gradient(90deg, black 50%, blue 50%);
}

<html>
<body>
</body>
</html>

answered Aug 14 '21 at 08:59

Ryan Le

Thanks! It works when the percentages are 50% each, but when I change the percentages (say 30% and 70%), the centre of both the colours appears distorted (actually a blurry mix of both the colours), could you tell me how I can fix that? (see [here](https://codepen.io/pr0grammar/pen/eYWoNdM) what I mean) – pr0grammar Aug 14 '21 at 09:45
2

You can have sections e.g. linear-gradient(90deg, black 0 30%, blue 30% 70%, red 70% 100%) - i.e. give a start and finish % for each and you get a sharp change rather than a gradual 'blur' between colors if one starts at the same % as another finishes. – A Haworth Aug 14 '21 at 10:01

1 Answers1