Is there a way to create a color gradient in CSS without using an image file?
I am trying to give a DIV a background with a color gradient so that it looks glossy.
Safari (Webkit) supports it:
http://webkit.org/blog/175/introducing-css-gradients/
Firefox 3.6+ supports it:
https://developer.mozilla.org/en/CSS/-moz-linear-gradient
W3 spec defines support for it:
http://dev.w3.org/csswg/css3-images/#gradients-
And you can use Modernizr to detect support and fall back on an image:
http://www.modernizr.com/docs/#cssgradients
Try this if you are using or can use PHP
http://snipplr.com/view/26070/multicolor-gradient-generator/
http://www.designdetector.com/2005/09/css-gradients-demo.php
See javascript solutions here
jQuery gradient plugin?
http://www.bennadel.com/blog/1014-Creating-Transparent-Gradients-With-jQuery.htm
Some gradient image generator
http://www.roundedcornr.com/
http://gradient-maker.com/
http://www.grsites.com/generate/group/4000/
http://tools.dynamicdrive.com/gradient/
http://www.allcrunchy.com/Web_Stuff/Gradient_Generator/
71 Gradient Resources for Web Design
http://vandelaydesign.com/blog/tools/gradient-resources/
Sure Is (using color: Royal Blue, Hex Code: #002366 as an example (example taken from: http://www.99colors.net/name/royal-blue):
<div class="gradient">[Your DIV text and what not]</div>
/* CSS Background Gradient */
.gradient
{
background-color: #628AD9;
/* For WebKit (Safari, Chrome, etc) */
background: #628AD9 -webkit-gradient(linear, left top, left bottom, from(#001640), to(#628AD9)) no-repeat;
/* Mozilla,Firefox/Gecko */
background: #628AD9 -moz-linear-gradient(top, #001640, #628AD9) no-repeat;
/* IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#001640, endColorstr=#628AD9) no-repeat;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#001640, endColorstr=#001640)" no-repeat;
}
Webkit browsers support pure-CSS gradients like this (see this example in Safari or Chrome) - but practically speaking for a cross-browser implementation you'll need to use images.
Go to http://www.colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D
You will see it generates the following code for the displayed glossy gradient there. You can change the gradient and copy the new code.
background: rgb(255,255,255); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-8 */
Related
I have created my own navbar and would like to set up a simple gradient background color for it.
So far I have the following which works fine for me in newer browsers but I am not sure what I have to add here to cover IE8 and IE9 as well (I am not interested in older versions).
Also, I came across filter: progid... when searching for this.
Can someone tell me if this needs to be added here as well to cover common browsers or if I need to add or change anything else for that ?
I would like to support newer versions of Chrome, Firefox, Opera and Safari + IE (incl. IE8 and IE9).
My CSS:
background: -moz-linear-gradient(top, #02b0fd 0%, #028dca 100%); /* Firefox */
background: -ms-linear-gradient(top, #02b0fd 0%, #028dca 100%); /* IE10 */
background: -o-linear-gradient(top, #02b0fd 0%, #028dca 100%); /* Opera */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #02b0fd), color-stop(1, #028dca)); /* Webkit (Safari) */
background: -webkit-linear-gradient(top, #02b0fd 0%, #028dca 100%); /* Webkit (Chrome) */
background: linear-gradient(top, #02b0fd 0%, #028dca 100%);
Many thanks in advance,
Mike
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0002b0fd', endColorstr='#028dca',GradientType=0 );
will give you IE6-9.
Using: http://www.colorzilla.com/gradient-editor/
Unable to use gradient along with image.
This works:
background: red url("/Style Library/Images/Recurr.png") center no-repeat
This wont work:
background: linear-gradient(black, white) url("/Style Library/Images/Recurr.png") center no-repeat
How to use gradient along with image.
You can use it.
See this:
background: #6cab26;
background-image: url(/Style Library/Images/Recurr.png); /* fallback */
background-image: url(/Style Library/Images/Recurr.png), -webkit-gradient(linear, left top, left bottom, from(#6cab26), to(#6ceb86)); /* Saf4+, Chrome */
The key is to use background-image for image and background for gradient.
I have included redundancies for other browsers.
.Blue{
background:#47b; /* Old browsers */
background:-webkit-linear-gradient(top,#47b 0%,#249 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top,#47b 0%,#249 100%); /* Opera 11.10+ */
background:-ms-linear-gradient(top,#47b 0%,#249 100%); /* IE10+ */
background:linear-gradient(to bottom,#47b 0%,#249 100%); /* W3C */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4477bb',endColorstr='#224499',GradientType=0); /* IE6-9 */
background-image: url("/Style Library/Images/Recurr.png") center no-repeat;
}
I have a problem with radial gradient and texture. I have something like this:
background-image: url('../img/texture.png');
/* fallback */
background: -moz-radial-gradient(rgba(253,253,253,0.1) 0%, rgba(237,237,242,0.7) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, color-stop(0%,rgba(253,253,253,0.1)), color-stop(100%,rgba(237,237,242,0.7))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(rgba(253,253,253,0.1) 0%,rgba(237,237,242,0.7) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(rgba(253,253,253,0.1) 0%,rgba(237,237,242,0.7) 100%); /* Opera 11.10+ */
background: -ms-radial-gradient(rgba(253,253,253,0.1) 0%,rgba(237,237,242,0.7) 100%); /* IE10+ */
background: radial-gradient(rgba(253,253,253,0.1) 0%,rgba(237,237,242,0.7) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1adb7c64', endColorstr='#b3dd532f',GradientType=0 ); /* IE6-9 */
but I get radial gradient without that background texture(../img/texture.png). Anyone know how to do this? Thanks in advance for your answers
You are overriding the background-image property by assigning new values to background immediately after.
to keep both backgrounds in each case, you should specify both backgrounds in every re-declaration of background, using comma separated notation
example:
background: -webkit-radial-gradient(rgba(253,253,253,0.1) 0%,rgba(237,237,242,0.7) 100%),
url('../img/texture.png');
I am experiencing a somewhat weird bug on a website I am building.
Using Chrome/Firefox/Safari/IE10 it works fine. However, using IE9 it turns into blue! What is wrong?
I suspect this code is messing it up (#colorOne, #colorTwo is replaced by the actual colors):
.gradient (#colorOne, #colorTwo) {
background: #colorOne; /* Old browsers */
background: -moz-linear-gradient(top, #colorOne 0%, #colorTwo 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#colorOne), color-stop(100%,#colorTwo)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #colorOne 0%,#colorTwo 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #colorOne 0%,#colorTwo 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #colorOne 0%,#colorTwo 100%); /* IE10+ */
background: linear-gradient(to bottom, #colorOne 0%,#colorTwo 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#colorOne', endColorstr='#colorTwo',GradientType=0 ); /* IE6-9 */
}
You have a blue Microsoft filter gradient in your CSS on the #top element and other elements within your site. But since you're specifically asking about the header, just remove:
#top {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#colorOne', endColorstr='#colorThree', GradientType=1);
/* Remove this from any other element you wish to be green */
}
The only difference is a gradient only interpreted by IE:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#colorOne', endColorstr='#colorThree', GradientType=1
Simply remove it.
I tred making this work using this reference. Yet it doesn't seem to be doing the trick. Did I miss something? I just need another set of eyes on this. Thank you.
The background image shows, but not the gradient. Here is a fiddle to show you what I mean.
What am I doing wrong?
background: #23458E;
background-image: url('/static/images/grey.png'); /* fallback */
background-image: url('/static/images/grey.png'), -webkit-gradient(linear, left top, left bottom, from(#23458E), to(#2661A8)); /* Saf4+, Chrome */
background-image: url('/static/images/grey.png'), -webkit-linear-gradient(top, #23458E, #2661A8); /* Chrome 10+, Saf5.1+ */
background-image: url('/static/images/grey.png'), -moz-linear-gradient(top, #23458E, #2661A8); /* FF3.6+ */
background-image: url('/static/images/grey.png'), -ms-linear-gradient(top, #23458E, #2661A8); /* IE10 */
background-image: url('/static/images/grey.png'), -o-linear-gradient(top, #23458E, #2661A8); /* Opera 11.10+ */
background-image: url('/static/images/grey.png'), linear-gradient(top, #23458E, #2661A8); /* W3C */
The image is completely opaque, so since it's specified before the gradient, it covers the gradient.
Both your image and the gradient are completely opaque, so it's not clear what exactly you're trying to accomplish with both of them. An explanation of your problem is the best I can offer at the moment.