Two Different Colors With Linear-Gradient Effect

Question

I am having two colors with me, red and yellow. According to Linear-gradient Format, if we insert red and yellow, automatically smooth transition occurs between them. If i dont want smooth transition, how can we represent them in code? Below code is with smooth transition, but i dont want smooth transition between those two colors. Any Help Please

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px;
    background: linear-gradient(red, yellow);
}
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

What you need is a hard-stop gradient. Examples - http://stackoverflow.com/questions/33918454/horizontal-sharp-background-gradient-with-specific-length-of-first-color/33918557#33918557 and http://stackoverflow.com/questions/27606260/blocky-gradient-effect-in-css3/27613861#27613861. Add color-stop positions to the colors and make the end position of one color the start position of the next. — Harry, Feb 11 '16 at 09:27

score 3 · Answer 1 · edited Jan 25 '18 at 21:25

3

Use this:

background: linear-gradient(to bottom, red 0%,red 50%,yellow 51%,yellow 100%);

~~Demo~~ URL now returns 404

edited Jan 25 '18 at 21:25

DᴀʀᴛʜVᴀᴅᴇʀ

7,681
17
73
127

answered Feb 11 '16 at 09:28

Mohammad Mehrabi

340
3
10

1

http://www.colorzilla.com/gradient-editor/#ff0400+0,ff0400+50,fffe00+51,fffe00+100 – Mohammad Mehrabi Feb 11 '16 at 09:29

score 3 · Answer 2 · answered Feb 11 '16 at 09:32

3

you can

.tg {
  height: 75px;
  width: 400px;
  background-image: linear-gradient(135deg, red 60%, yellow 60.5%);
}

 <div class='tg'></div>

demo

answered Feb 11 '16 at 09:32

User_3535

826
1
13
30

score 0 · Answer 3 · answered Feb 11 '16 at 09:32

CSS3 gradient we can simply generate in online tools, like colorzilla

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 200px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff0000+0,ff0000+50,ffff00+51,ffff00+100 */
background: rgb(255,0,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,0,0,1) 0%, rgba(255,0,0,1) 50%, rgba(255,255,0,1) 51%, rgba(255,255,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 51%,rgba(255,255,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 51%,rgba(255,255,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffff00',GradientType=0 ); /* IE6-9 */


}
</style>
</head>
<body>

<div id="grad1"></div>

</body>
</html>

score -1 · Answer 4 · answered Feb 11 '16 at 09:28

-1

Why dont you just make 2 divs one above the other then?

#grad1 {
    height: 100px;
    background: red;
}
#grad2 {
    height: 100px;
    background: yellow;
}

See it working here: https://jsfiddle.net/eosx5cgc/

answered Feb 11 '16 at 09:28

Ben Rhys-Lewis

3,118
8
34
45

I accept and convinced with this technique..Doing in a single div is on my thought, so i asked this question. Kudos!!!!!! – Manoj Karthik Feb 11 '16 at 09:31
Mark as correct then if it helped you. The other answers are good if you wanted something more complicated or it absolutely has to be in one div. – Ben Rhys-Lewis Feb 11 '16 at 09:33

Two Different Colors With Linear-Gradient Effect

4 Answers4