CODEWITHSUNDEEP
cssgradient
Eleven
Eleven

Reputation: 13

3 part linear gradient troubles

This bar identifies the tab below a top menu to add some color to the layout. The gradient works without the % value thrown in but what I wanted to do is stretch the solid color at the edge a bit to better define the menu. What changes should I make?

#tabLower {
    background:linear-gradient(90deg,rgba(204,147,90,1) 10%,rgba(204,147,90,.5),rgba(204,147,90,1) 10%);
    width:1440px;
    height:10px;
    position:fixed;
    left:0;
    top:50px;
    z-index:220
}

Upvotes: 0

Views: 36

Answers (2)

Eleven
Eleven

Reputation: 13

I found a cheep answer which does what i like so it fine this way. I had the opacity of the gradient at .5, I changed it to .7 and it ended up fading the color a bit slower making the edges longer.

#tabLower {
    background:linear-gradient(90deg,rgba(204,147,90,1),rgba(204,147,90,.7),rgba(204,147,90,1));
    width:1440px;
    height:10px;
    position:fixed;
    left:0;
    top:50px;
    z-index:220;
}

Upvotes: 0

abbott567
abbott567

Reputation: 862

Linear gradients are one of those anomalies. They are coded differently for different browsers. Its sometimes easier to use a generator, something like http://www.colorzilla.com/gradient-editor/

Upvotes: 1

Related Questions