radial gradient css issue in ie - html

I have used the following css for radial gradient.
background-image: -moz-radial-gradient(50% 0 , rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0)), -moz-radial-gradient(50% 100% , rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0));
background-image: -ms-linear-radial-gradient(50% 0 , rgba(0, 0, 0, 0.60), rgba(255, 255, 255, 0)), -ms-linear-radial-gradient(50% 100% , rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0));
background-image: -o-linear-radial-gradient(50% 0 , rgba(0, 0, 0, 0.60), rgba(255, 255, 255, 0)), -o-linear-radial-gradient(50% 100% , rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0));
background-image: -webkit-radial-gradient(50% 0 , rgba(0, 0, 0, 0.60), rgba(255, 255, 255, 0)), -webkit-radial-gradient(50% 100% , rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0));
It is working fine in firefox and google chrome. I need the same in IE. I have extracted the following css from google to work in IE
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
But i don't know how to change the percentages and colors to match the above css. Any help?
http://jsfiddle.net/tKjap/


Does IE support rgba colors? If it does, then just replace the hex colors in the copied code with the rgba colors.
Ex.)
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(255, 255, 255, 0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0, 0, 0, 0.35)', endColorstr='rgba(255, 255, 255, 0)',GradientType=0 ); /* IE6-9 */
Some reading:
http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/


You can get the Gradient CSS as per your requirement and can make also Gradient CSS according to your color requirement.
http://www.colorzilla.com/gradient-editor/


this should help you
http://davidwalsh.name/css-gradients
http://www.webdesignerwall.com/demo/gradient-box.html
http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/

Related

How to combine Background Image + Linear Gradient in CSS ? Linear Gradient over the Background Image

wish you all are doing well.
So I have a section with a background image and I want to add a linear gradient over the background image.
The result I aim for:
Till now, I have a div with a background image.
Curent CSS:
background-image: url("../pixels/lastCallToActionBg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
Linear Gradiant CSS that I want to add:
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(
top,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 1%,
rgba(0, 0, 0, 0) 15%,
rgba(0, 0, 0, 0) 100%
); /* FF3.6-15 */
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgba(0, 0, 0, 1)),
color-stop(1%, rgba(0, 0, 0, 1)),
color-stop(15%, rgba(0, 0, 0, 0)),
color-stop(100%, rgba(0, 0, 0, 0))
); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(
top,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 1%,
rgba(0, 0, 0, 0) 15%,
rgba(0, 0, 0, 0) 100%
); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(
top,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 1%,
rgba(0, 0, 0, 0) 15%,
rgba(0, 0, 0, 0) 100%
); /* Opera 11.10-11.50 */ /* IE10 preview */
background: -webkit-gradient(
linear,
left top,
left bottom,
from(rgba(0, 0, 0, 1)),
color-stop(1%, rgba(0, 0, 0, 1)),
color-stop(15%, rgba(0, 0, 0, 0)),
to(rgba(0, 0, 0, 0))
);
background: -moz-linear-gradient(
top,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 1%,
rgba(0, 0, 0, 0) 15%,
rgba(0, 0, 0, 0) 100%
);
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 1%,
rgba(0, 0, 0, 0) 15%,
rgba(0, 0, 0, 0) 100%
); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-8 */
Thank you.

Make a div inside the section, it will serve as a mask, and set the gradient of this mask as a background in it.
The css of the mask will look like this:
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
So it would be all over the parent element (section)
section {
width: 100vw;
height: 10rem;
background: url(https://www.yannickdixon.com/wp-content/uploads/2016/12/161124-golden-seaside-sunset-photography-print.jpg);
}
.overlay {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(1%, rgba(0, 0, 0, 1)), color-stop(15%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)) );
background: -webkit-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
background: -o-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
background: -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(1%, rgba(0, 0, 0, 1)), color-stop(15%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)) );
background: -moz-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
background: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
}
<section>
<div class="overlay"></div>
</section>

try this one
body {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://actionseaze.com/wp-content/uploads/2020/02/sunset.jpg),
-webkit-linear-gradient(
top,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 1%,
rgba(0, 0, 0, 0) 35%,
rgba(0, 0, 0, 0) 100%
);
background-blend-mode: color;
height: 100vh;
}

CSS Opacity Fade

I'm trying to take this as a CSS background on a div, but I'd like to have the image start fading in to the background at around 200px like this (black background used for example). Is there a CSS only method of doing this?
I plan on wrapping this project in NodeWebkit, so as long as it works in Chrome I'm not worried about other browsers.
Thanks in advance!
HTML:
<div class="profileBox">
...
</div>
CSS:
.profileBox {
background-image: url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg');
background-repeat: no-repeat;
width: 300px;
}

Try this solution, no modification of your HTML is required and not JS.
Basically you can create your gradient using -webkit-linear-gradient adding property url for your image.
http://jsfiddle.net/0kj8t1zq/6/
<div class="profileBox"></div>
.profileBox {
position: absolute;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
s-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
width: 308px;

You have already answers to fade it to black.
If you want to fade it to transparent, you need masking. It doesn't have much support, but it works in Chrome
.profileBox {
background-image: url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg');
background-repeat: no-repeat;
width: 300px;
height: 400px;
-webkit-mask-image: linear-gradient(0deg, transparent 100px, black 200px);
border: solid 2px white;
}
body {
background-color: blue;
}
<div class="profileBox"></div>
Changed body background to blue to see it is really transparent

For the fade effect, you can use rgba in webkit-gradient.
To get an image AND a gradient as background you can play with opacity. But there is no CSS property background-opacity, so you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it (source).
.profileBox {
width: 300px;
height: 300px;
display: block;
position: relative;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0))); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* FF3.6+ */
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* IE10 */
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Opera 11.10+ */
background-image: linear-gradient(top bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* W3C */
}
.profileBox::after {
content: "";
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background-repeat: no-repeat;
background-image: url(http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg);
}
<div class="profileBox">
</div>

Shape with striped background and a triangular cut on top

Hello I need to make shape in CSS/HTML5. I pasted it as an image but now I need to make shape like this.
Is there any way to do it? I made something with triangles but it doesn't even look close to this.
SHAPE:
Here is my CSS.
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
float:left;
}
#flag:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-top: 25px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
HTML:
<div id="flag"></div><span>SOME TEXT HERE</span>
JS FIDDLE

You can achieve this using either of the following 2 options.
Option 1: Using box-shadow and an extra pseudo-element.
In this option an extra pseudo-element of size 20px is added (white/grey color) and using appropriately positioned box-shadows, the striped pattern is achieved. This method can be useful if the dimensions of your flag element is fixed.
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
float: left;
overflow: hidden;
}
#flag:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-top: 25px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
#flag:after {
content: "";
position: absolute;
top: 0px;
left: -30px;
height: 10px;
width: 150px;
background: #eee;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
box-shadow: -20px 60px 0px #eee, -20px 80px 0px #eee, -20px 20px 0px #eee, -20px -20px 0px #eee, 0px 40px 0px #eee;
}
<div id="flag"></div><span>SOME TEXT HERE</span>
Option 2: Using Linear Gradients
In this method the stripes are obtained using linear-gradients as a background on a pseudo-element which is rotated by 45 degrees to achieve the diagonal stripes effect. This option can be used even if the dimensions are not fixed because of usage of percentage for linear-gradients.
div{
height: 100px;
width: 100px;
position: relative;
overflow: hidden;
}
div:before{
content: '';
position: absolute;
background: -webkit-linear-gradient(90deg, red 50%, #eee 50%);
background: -moz-linear-gradient(0deg, red 50%, #eee 50%);
background: linear-gradient(0deg, red 50%, #eee 50%);
background-size: 100% 20px;
top: 0px;
left: 0px;
height: 150%;
width: 150%;
-webkit-transform-origin: 15% 60%;
-moz-transform-origin: 15% 60%;
transform-origin: 15% 60%;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
div:after{
content: '';
position: absolute;
background: #eee;
top: -25%;
left: 25%;
height: 50%;
width: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<div></div>
Note: In the second sample, I had positioned the top triangle such that it still leaves some space on either sides just for an example. This fiddle has a top triangle that covers the full width of the flag.

You could use css gradients for this, as well as a single pseudo element:
div{
position:relative;
height:300px;
width:300px;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(0,0,0,1) 15%, rgba(255,255,255,1) 15%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 16%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 20%, rgba(255,255,255,1) 21%, rgba(255,255,255,1) 35%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 40%, rgba(255,255,255,1) 41%, rgba(255,255,255,1) 55%, rgba(0,0,0,1) 55%, rgba(0,0,0,1) 60%, rgba(255,255,255,1) 61%, rgba(255,255,255,1) 75%, rgba(255,255,255,1) 75%, rgba(0,0,0,1) 76%, rgba(0,0,0,1) 80%, rgba(255,255,255,1) 81%, rgba(255,255,255,1) 95%, rgba(0,0,0,1) 96%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(15%,rgba(255,255,255,1)), color-stop(15%,rgba(0,0,0,1)), color-stop(15%,rgba(255,255,255,1)), color-stop(16%,rgba(0,0,0,1)), color-stop(16%,rgba(0,0,0,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(21%,rgba(255,255,255,1)), color-stop(35%,rgba(255,255,255,1)), color-stop(35%,rgba(0,0,0,1)), color-stop(40%,rgba(0,0,0,1)), color-stop(41%,rgba(255,255,255,1)), color-stop(55%,rgba(255,255,255,1)), color-stop(55%,rgba(0,0,0,1)), color-stop(60%,rgba(0,0,0,1)), color-stop(61%,rgba(255,255,255,1)), color-stop(75%,rgba(255,255,255,1)), color-stop(75%,rgba(255,255,255,1)), color-stop(76%,rgba(0,0,0,1)), color-stop(80%,rgba(0,0,0,1)), color-stop(81%,rgba(255,255,255,1)), color-stop(95%,rgba(255,255,255,1)), color-stop(96%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* IE10+ */
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 15%,rgba(255,255,255,1) 15%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 16%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 20%,rgba(255,255,255,1) 21%,rgba(255,255,255,1) 35%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 40%,rgba(255,255,255,1) 41%,rgba(255,255,255,1) 55%,rgba(0,0,0,1) 55%,rgba(0,0,0,1) 60%,rgba(255,255,255,1) 61%,rgba(255,255,255,1) 75%,rgba(255,255,255,1) 75%,rgba(0,0,0,1) 76%,rgba(0,0,0,1) 80%,rgba(255,255,255,1) 81%,rgba(255,255,255,1) 95%,rgba(0,0,0,1) 96%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
div:before{
content:"";
position:absolute;
border-top:150px solid white;
border-left:150px solid transparent;
border-right:150px solid transparent;
top:0;
<div></div>
A slightly different approach to create the upper section would also be ok (i guess):
div {
position: relative;
overflow: hidden;
height: 200px;
width: 200px;
background: rgb(255, 255, 255);
/* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(15%, rgba(255, 255, 255, 1)), color-stop(15%, rgba(0, 0, 0, 1)), color-stop(15%, rgba(255, 255, 255, 1)), color-stop(16%, rgba(0, 0, 0, 1)), color-stop(16%, rgba(0, 0, 0, 1)), color-stop(20%, rgba(0, 0, 0, 1)), color-stop(20%, rgba(0, 0, 0, 1)), color-stop(21%, rgba(255, 255, 255, 1)), color-stop(35%, rgba(255, 255, 255, 1)), color-stop(35%, rgba(0, 0, 0, 1)), color-stop(40%, rgba(0, 0, 0, 1)), color-stop(41%, rgba(255, 255, 255, 1)), color-stop(55%, rgba(255, 255, 255, 1)), color-stop(55%, rgba(0, 0, 0, 1)), color-stop(60%, rgba(0, 0, 0, 1)), color-stop(61%, rgba(255, 255, 255, 1)), color-stop(75%, rgba(255, 255, 255, 1)), color-stop(75%, rgba(255, 255, 255, 1)), color-stop(76%, rgba(0, 0, 0, 1)), color-stop(80%, rgba(0, 0, 0, 1)), color-stop(81%, rgba(255, 255, 255, 1)), color-stop(95%, rgba(255, 255, 255, 1)), color-stop(96%, rgba(0, 0, 0, 1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* IE10+ */
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 15%, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 1) 20%, rgba(255, 255, 255, 1) 21%, rgba(255, 255, 255, 1) 35%, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 1) 40%, rgba(255, 255, 255, 1) 41%, rgba(255, 255, 255, 1) 55%, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 1) 60%, rgba(255, 255, 255, 1) 61%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 75%, rgba(0, 0, 0, 1) 76%, rgba(0, 0, 0, 1) 80%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 95%, rgba(0, 0, 0, 1) 96%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
div:before {
content: "";
position: absolute;
height: 70%;
width: 70%;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
background: white;
top: 0;
<div></div>
Useful resource: Gradient editor

Background gradient top left and bottom right

I have this css applied to my DIV
div#envelope{
width: 400px;
margin: 140px 23% 10px 16%;
padding:33px 0 10px 0;
border-radius:2px;
background-color: rgba(255,255,255,0.5);
background-image: -webkit-gradient(
linear,
right bottom,
left top,
color-stop(0, rgba(255, 255, 255, 0.5)),
color-stop(0.50, rgba(255, 255, 255, 0.5))
);
background-image: -o-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: -moz-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: -webkit-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: -ms-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: linear-gradient(to left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
}
Question - I want to apply the gradient to top left and another gradient to bottom right, what is the correct syntax to achieve this?

You want to apply a gradient towards the top-left and another towards the bottom right. You can however do this with a single gradient using 3 colors. The 0% value will be in the right bottom, the 100% value in the left top, the 50% value will be between them. Feel free to play around with the JSFiddle. Hope this answers your question.
background:
linear-gradient(to left top, rgba(0, 255, 255, 1) 0%/*bottom-right color*/, rgba(255, 0, 255, 0.5) 50% /*middle color*/, rgba(255, 255, 0, 1) 100% /*top-left color*/),
linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1))/*"faked" black background make sure to add last or it will appear before the transparent/colored layer*/;
PS: I did only use the "regular" gradient and not all cross-browser ones (you seem to be perfectly capable of that yourself).
PSII: You can always add more colors to the gradient.

Header background picture not showing on ie6

I’ve noticed that the background picture of my header is not showing at all on ie6. See http://goo.gl/YbW2xb
Don’t want to make my website looks perfect on ie6, but is there a quick fix for that?
Many thanks,
CSS:
header {
position: relative;
width: 100%;
height: 600px;
margin-right: auto;
margin-left: auto;
background-size: 100% 100%, cover;
background-color: rgb(222, 222, 222);
}
.wrapper-3 header {
background-image: -webkit-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
background-image: -moz-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
background-image: -o-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
background-image: -ms-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
background-image: linear-gradient(359deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
background-position: 0% 0%, center center;
opacity: 0.95;
}
HTML
<div class="wrapper wrapper-3 clearfix">
<header class="clearfix">
</header>
</div>

Since IE 6 doesn't support multiple backgrounds, a simple fallback should works ?
You have no file name for your image, not sure this is intended !
.wrapper-3 header {
background-image: url('../images/.jpg'); /* fallback */
background-image: -webkit-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
background-image: -moz-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
background-image: -o-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
background-image: -ms-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
background-image: linear-gradient(359deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
background-position: 0% 0%, center center;
opacity: 0.95;
}

try this. replace your css with this. add
.wrapper-3 header {
background-image:url('../images/.jpg'); /*add this for IE*/
background-image: -webkit-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
background-image: -moz-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
background-image: -o-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
background-image: -ms-linear-gradient(91deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
background-image: linear-gradient(359deg, rgba(255, 255, 255, 0.23) 0%, rgba(0, 0, 0, 0) 100%), url('../images/.jpg');
background-position: 0% 0%, center center;
opacity: 0.95;
}