Is this the correct way to set a CSS gradient with two color stops?

Masure

New Member
I have been trying for some time to make my code work with all the browser prefixes below. This is what I have come up with. Can someone tell me if this is the correct way to code the gradient using Less? In particular I'm confused about -webkit-linear-gradient as I can't find how to do this with the spec. My less code:\[code\].setTopGradient(@startClr, @endClr, @st1Clr, @st1Pos, @st2Clr, @st2Pos) { @st1PosPercent: @st1Pos * 100%; @st2PosPercent: @st2Pos * 100%; background: -moz-linear-gradient( top, @startClr, @st1Clr @st1PosPercent, @st2Clr @st2PosPercent, @endClr ); background: -webkit-gradient( linear, left @startClr, left @endClr, color-stop(@st1Pos, @st1Clr), color-stop(@st2Pos, @st2Clr) ); background: -webkit-linear-gradient( linear, left top, left bottom, from(@startClr), to(@endClr), color-stop(@st1Pos, @st1Clr), color-stop(@st2Pos, @st2Clr) ); background: -ms-linear-gradient( @startClr 0%, @st1Clr @st1PosPercent, @st2Clr @st2PosPercent, @endClr 100% ); background: -o-linear-gradient( @startClr 0%, @st1Clr @st1PosPercent, @st2Clr @st2PosPercent, @endClr 100% ); background: linear-gradient( to @endClr, @st1Clr @st1PosPercent, @st2Clr @st2PosPercent, @endClr 100% );}\[/code\]Sample Input:\[code\].setTopGradient(#8b8b8b,#bfbfbf,#a9a9a9,0.1,#bdbdbd,0.3);\[/code\]Output CSS:\[code\] background: -moz-linear-gradient(top, #8b8b8b, #a9a9a9 10%, #bdbdbd 30%, #bfbfbf); background: -webkit-gradient(linear, left #8b8b8b, left #bfbfbf, color-stop(0.1, #a9a9a9), color-stop(0.3, #bdbdbd)); background: -webkit-linear-gradient(linear, left top, left bottom, from(#8b8b8b), to(#bfbfbf), color-stop(0.1, #a9a9a9), color-stop(0.3, #bdbdbd)); background: -ms-linear-gradient(#8b8b8b 0%, #a9a9a9 10%, #bdbdbd 30%, #bfbfbf 100%); background: -o-linear-gradient(#8b8b8b 0%, #a9a9a9 10%, #bdbdbd 30%, #bfbfbf 100%); background: linear-gradient(to #bfbfbf, #a9a9a9 10%, #bdbdbd 30%, #bfbfbf 100%);\[/code\]
 
Back
Top