Add css gradient

Question

I use this css code to visualize green background at jsf page:

.container{
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #5fa309), color-stop(1, #3b8018));
    background:-webkit-linear-gradient(top, #5fa309 0%, #3b8018 100%);
    background:-moz-linear-gradient(top, #5fa309 0%, #3b8018 100%);
    background:-o-linear-gradient(top, #5fa309 0%, #3b8018 100%);
    background:-ms-linear-gradient(top, #5fa309 0%, #3b8018 100%);
    background:linear-gradient(top, #5fa309 0%, #3b8018 100%);
    position:relative;
    display:inline-block;
    padding:0 20px 0 10px;
    width:270px;
    line-height:20px;
    font-size:12px;
    font-family:sans-serif;
    text-shadow:0 1px 0 #264400;
    font-weight:bold;
    color:#fff
}
.container:after{
    content:'';
    background:-webkit-gradient(linear, left top, right bottom, color-stop(0, #5fa309), color-stop(1, #3b8018));
    background:-webkit-linear-gradient(top left, #5fa309 0%, #3b8018 100%);
    background:-moz-linear-gradient(top left, #5fa309 0%, #3b8018 100%);
    background:-o-linear-gradient(top left, #5fa309 0%, #3b8018 100%);
    background:-ms-linear-gradient(top left, #5fa309 0%, #3b8018 100%);
    background:linear-gradient(top left, #5fa309 0%, #3b8018 100%);
    position:absolute;
    top:3px;
    right:-7px;
    width:15px;
    height:15px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg)
}

I'm interested how I can add this white color effect at the end:

enter image description here

Is this possible with pure css?

when you say 'white color effect at the end' do you mean within the gradient itself? If so you can just add more % properties. — Sheixt
– Sheixt, Commented Jan 21, 2013 at 23:42

KatieK · Accepted Answer · 2013-01-22 17:28:08Z

You can get pretty close using one of the many CSS gradient generators out there. Here is one that I generated from ColorZilla:

background: #b4df5b; /* Old browsers */
background: -moz-linear-gradient(45deg,  #b4df5b 40%, #ffffff 89%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(40%,#b4df5b), color-stop(89%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  #b4df5b 40%,#ffffff 89%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  #b4df5b 40%,#ffffff 89%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  #b4df5b 40%,#ffffff 89%); /* IE10+ */
background: linear-gradient(45deg,  #b4df5b 40%,#ffffff 89%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

You will have to refine the gradient to if you need it to be closer to your goal. For the background to look precisely the same in all browsers, background images are your best bet.

Collectives™ on Stack Overflow

Add css gradient

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related