How to add multiple css gradient as a multiple background?

Question

I want to make a button like this without using image by gradients as multiple background. is it possible?

enter image description here

using single element

<span class="customStyleSelectBox">Dummy Text</span>

Try at jsfiddle here http://jsfiddle.net/Awf6s/2/

scessor · Accepted Answer · 2011-11-24 09:05:02Z

39

You can define multiple gradients comma-separated. E.g.:

.customStyleSelectBox {
    ...
    background: linear-gradient(#fff, #999) no-repeat border-box, linear-gradient(#eee, #777) no-repeat border-box;
    background-size: 98px 50px, 18px 50px;
    background-position: 0 0, 98px 0;
    background-origin: padding-box, padding-box;
}

Also see your updated jsfiddle.

edited Nov 24, 2011 at 9:05

answered Nov 24, 2011 at 8:43

scessor

16.1k4 gold badges45 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add multiple css gradient as a multiple background?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related