Add css gradient - css

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:
Is this possible with pure css?

Answer 1

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.