CODEWITHSUNDEEP
htmlcss
Links
Links

Reputation: 227

How to create multiple background color in my case?

i am trying to create a multiple solid background color in my div.

I have found this post. Can I apply multiple background colors with CSS3?

but not sure what it means.

I have this

background-image:-webkit-linear-gradient(left, grey 20%, red 30%, yellow 10%, blue 100%)

The boundary between red and yellow is solid but grey/red boundary and blue/yellow boundary are blurry. How do I make them all solid?

Thanks

Upvotes: 1

Views: 102

Answers (2)

Arin
Arin

Reputation: 1393

You can; the trick is to repeat the ending position of the previous color as the starting position for your new color. Like so:

    background-image:-webkit-linear-gradient(left, grey 20%, red 20%, red 30%, yellow 30%, yellow 80%, blue 80%, blue 100%)

Basically this defines grey as being from 0-20%, red from 20%-30%, yellow 30%-80% and blue 80%-100%.

Upvotes: 0

Derek Story
Derek Story

Reputation: 9583

Try this: JS Fiddle

#test {
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(left, #6E6E6E 25%, #F20000 25%, #F20000 50%, #FFFF21 50%, #FFFF21 75%, #1231FF 75%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(left, #6E6E6E 25%, #F20000 25%, #F20000 50%, #FFFF21 50%, #FFFF21 75%, #1231FF 75%);

/* Opera */ 
background-image: -o-linear-gradient(left, #6E6E6E 25%, #F20000 25%, #F20000 50%, #FFFF21 50%, #FFFF21 75%, #1231FF 75%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, right top, color-stop(.25, #6E6E6E), color-stop(.25, #F20000), color-stop(.5, #F20000), color-stop(.5, #FFFF21), color-stop(.75, #FFFF21), color-stop(.75, #1231FF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(left, #6E6E6E 25%, #F20000 25%, #F20000 50%, #FFFF21 50%, #FFFF21 75%, #1231FF 75%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to right, #6E6E6E 25%, #F20000 25%, #F20000 50%, #FFFF21 50%, #FFFF21 75%, #1231FF 75%);
}

Created here: http://ie.microsoft.com/TEStdrive/Graphics/CSSGradientBackgroundMaker/Default.html

Upvotes: 1

Related Questions