What would this gradient be in standard syntax?
-webkit-gradient(radial, center top, 0, center top, 1000, from(black), to(white))
If you are looking for cross browser CSS3 Radial Gradient:
background: #ffffff;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjNDA5NmVlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #4096ee 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#4096ee));
background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#4096ee 100%);
background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#4096ee 100%);
background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#4096ee 100%);
background: radial-gradient(center, ellipse cover, #ffffff 0%,#4096ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#4096ee',GradientType=1 );
From my point of view, the best tool on CSS gradient is Ultimate CSS Gradient Generator.
Try this.
background: -webkit-radial-gradient(center top,ellipse,#color1,#color2);
note:it can be ellipse or circle etc..
also add -moz, -ms, -o etc for different browsers.
Related
I want to style background of one element in CSS, something like this:
color gradient from top to bottom with no any transparency,
transparency gradient with single color from left to right: left and right with no transparency, and middle with 100% transparency
Second gradient should be on higher layer than first. Both placed on 100% of element's area
Code:
div.panel div.panel-heading
{
background: linear-gradient(to bottom, #e8e8e8 0%,#dbdbdb 50%,#cdcdcd 51%,#e0e0e0 100%),
/* Here I want have got second gradient, with transparency, on higher layer */;
}
Is this possible to do?
It is possible with :after and :before :
.gradient{
height:400px;
background: #61fc32;
background: -moz-linear-gradient(left, #61fc32 0%, #f43034 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#61fc32), color-stop(100%,#f43034));
background: -webkit-linear-gradient(left, #61fc32 0%,#f43034 100%);
background: -o-linear-gradient(left, #61fc32 0%,#f43034 100%);
background: -ms-linear-gradient(left, #61fc32 0%,#f43034 100%);
background: linear-gradient(to right, #61fc32 0%,#f43034 100%);
position:relative;
}
.gradient:after{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: -moz-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%, rgba(40,51,201,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(40,51,201,0)), color-stop(100%,rgba(40,51,201,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
background: radial-gradient(ellipse at center, rgba(40,51,201,0) 0%,rgba(40,51,201,1) 100%);
}
DEMO
I'm looking to recreate a background like the one linked here using only css, I'm sure it's possible but I'm terrible at making CSS3 work for me.
If possible it should work in all modern browsers, not overly fussed about < IE8 support.
Any help is appreciated.
This is the CSS to create a Circular Gradient.
Creating gradient using CSS3 is very easy now. As there are many tools available.
Here are some online tools generate the gradiend code:
Colorzilla Gradients
Gradientoo
div{
width:250px;
height: 250px;
background-image: radial-gradient(center center, circle cover, #ffeda3, #ffc800);
background-image: -o-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
background-image: -ms-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
background-image: -moz-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
background-image: -webkit-radial-gradient(center center, circle cover, #ffeda3, #ffc800);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffeda3', endColorstr='#ffc800',GradientType=1 );
}
Here is the Demo. http://jsbin.com/wedubinu/1/
background: #1e5799; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjN2RiOWU4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #1e5799 0%,#7db9e8 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #1e5799 0%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
Generated by http://www.colorzilla.com/gradient-editor/
I am using CSS background gradients to create a transparent radial gradient effect. If you look here in Chrome: http://dev.aaronpitts.ch/unitymedia/index.html you will see it working how I want (the Social Media, SEM, Web Design and Begin your journey backgrounds). The problem is the other browsers don't keep it smooth and cut off the edges. Any ideas?
This is the code I'm using:
#home-services article {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM4YjhiOGIiIHN0b3Atb3BhY2l0eT0iMC4zNyIvPgogICAgPHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC44NCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(139,139,139,0.37) 0%, rgba(255,255,255,0.84) 75%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(139,139,139,0.37)), color-stop(75%,rgba(255,255,255,0.84)), color-stop(100%,rgba(255,255,255,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);
background: radial-gradient(ellipse at center, rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e8b8b8b', endColorstr='#ffffff',GradientType=1 );
text-shadow: 2px 2px 0px #FFF;
}
To avoid having the gradient cut off you need to stop it before it reaches the closest side of the container.
Fortunately, there is a keyword property in the gradient syntax closest-side.
JSfiddle Demos (of various options)
CSS for closest-side using obvious gradient
.closest-side {
background: radial-gradient(
ellipse closest-side,
rgba(0,0,0,1) 0%,
rgba(255,255,255,1)75%,
rgba(0,0,0,1) 100%);
}
I have created a simple css bar with colour stops using the following:
#testing{
width:100%;
height:40px;
background-image: -webkit-linear-gradient(left, #034a96 80%, #eab92d 50%);
background-image: -moz-linear-gradient(top, #034a96 50%, #eab92d 51%);
background-image: -ms-linear-gradient(top, #034a96 50%, #eab92d 51%);
background-image: -o-linear-gradient(top, #034a96 50%, #eab92d 51%);
background-image: linear-gradient(top, #034a96 50%, #eab92d 51%);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
What I would like to do is have the first 80% of the bar is have a gradient that goes from the top with colour #034a96 to #0663c7 and then just that gradient colouring 50% of the bar. Then with the other 51% I have another gradient from the top with #eab92d to #c79810. What I'm asking is if it is possible to have multiple gradients with in each other eg:
background-image: -webkit-linear-gradient(left, top #034a96 to #0663c7 50%, top #eab92d to #c79810 51%);
Or something along those lines. I hope I'm being clear with everything. Thanks in advance
Yes, you can.
One simple example (not exactly your colourset, but it shows the plan):
background: #b8e1fc; /* Old browsers */
background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */
This code doesn't create multi-step gradients in IE.
Up to IE9, these aren't possible at all (only simple gradients), but IE9 supports SVG data. It's a bit complicated to write, but you should have a look at http://www.colorzilla.com/gradient-editor. It's an online-tool for creating CSS code for gradients. It also supports SVG gradients for IE9.
Here's what I'm trying to do: A solid grey background with a semi-eclipse (i.e. half an eclipse) of light starting from the centre of the page and ending at the top, so it looks as if there is a torch shining upwards from the centre of the page.
I've tried using SVG instead of css as I thought it might be easier, but I've ran into a few problems. Can anyone point me in the right direction?
Edit: Here's an image of what I'm trying to achieve:
You can use a radial-gradient as the background image like this:
html {
background: #ccc;
background: -moz-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -webkit-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -ms-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: -o-radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
background: radial-gradient(50% -50%, cover, #fff 0%, #eee 50%, #ccc 55%, #bbb 100%);
min-height: 100%;
}
This works by placing the center of the gradient 50% above the page (note the -50% second parameter.) combined with the cover size attribute.
You can read more about the CSS radial-gradient property at MDN.
Here is an example: http://jsfiddle.net/kUFNV/4/
Why not use a CSS gradient? Here:
background: #f9f9f9;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmOWY5ZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjY2RjZGNkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #cdcdcd 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#f9f9f9), color-stop(100%,#cdcdcd));
background: -webkit-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -o-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: -ms-radial-gradient(center, ellipse cover, #f9f9f9 0%,#cdcdcd 100%);
background: radial-gradient(ellipse at center, #f9f9f9 0%,#cdcdcd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#cdcdcd',GradientType=1 );
Then add a margin-top: -50%; CSS to the element with the background. I don't suggest this is the body element as it'll get a bit messy, but create a new element with absolute positioning, give it the gradient code and the -50% margin and z-index: -1; so it'll be under all the rest of the page.
Good luck!
I'd recommend playing around with one of the CSS3 gradient generators like this one. With a few different color stops on a radial gradient, you should be able to accomplish something pretty close.
Here's one I put together quickly: http://jsfiddle.net/43k6F/