I created small web page:
<!DOCTYPE html>
<html>
<head>
<style>
html
{
position: fixed;
}
body {
background: radial-gradient(ellipse at center, rgba(141,141,141,0) 0,rgba(141,141,141,1) 100%);
}
</style>
</head>
<body>
<p>TEST</p>
</body>
</html>
It's small example to illustrate problem but I have bigger application where is the same. When I add position: fixed to html tag gradient on body tag stops working. It works fine on Google Chrome, Internet Explorer, Microsoft Edge but not on Firefox. I can add that when a change gradient to background-color or backgorund-image it works fine. Firefox version:53.0.3. Do you have any ideas how to deal with that?
Firefox had some bugs related to radial gradient, so try with below syntax
background: radial-gradient(ellipse at 50% 50%, #ffffff 0%, #8D8D8D 100%);
or background: radial-gradient(ellipse at center, #ffffff 0%, #8D8D8D 100%);
or Try with -moz- suffix,
background: -moz-radial-gradient(ellipse at center, rgba(141,141,141,0) 0, rgba(141,141,141,1) 100%);
background: radial-gradient(ellipse at center, rgba(141,141,141,0) 0, rgba(141,141,141,1) 100%);
Related
How can generate rectangular using gradient in CSS?
My expectation is like this picture
you can try this code to make rectangle by making a div and class as rectangle,
.rectangle {
width: 400px;
height: 200px;
background: linear-gradient(to left bottom, rgb(84, 255, 84), #329600, rgb(124, 124, 124));
}
you can change the direction of color also.
I guess that what you are looking for is a linear gradient. I recomand you to try this web site : https://cssgradient.io/ to easly visualize the render of the css property
background: linear-gradient
I tried to reproduce what was on your exemple and I get this css code
.exemple{
width:200px;
height: 150px;
background: rgb(40,83,62);
background: -moz-linear-gradient(150deg, rgba(40,83,62,1) 5%, rgba(156,200,151,1) 80%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(150deg, rgba(40,83,62,1) 5%, rgba(156,200,151,1) 80%, rgba(255,255,255,1) 100%);
background: linear-gradient(150deg, rgba(40,83,62,1) 5%, rgba(156,200,151,1) 80%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#28533e",endColorstr="#ffffff",GradientType=1);
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<body>
<div class="exemple"></div>
</body>
</html>
Hope this helps !!
I am having two colors with me, red and yellow. According to Linear-gradient Format, if we insert red and yellow, automatically smooth transition occurs between them. If i dont want smooth transition, how can we represent them in code? Below code is with smooth transition, but i dont want smooth transition between those two colors. Any Help Please
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
you can
.tg {
height: 75px;
width: 400px;
background-image: linear-gradient(135deg, red 60%, yellow 60.5%);
}
<div class='tg'></div>
demo
Use this:
background: linear-gradient(to bottom, red 0%,red 50%,yellow 51%,yellow 100%);
Demo URL now returns 404
Why dont you just make 2 divs one above the other then?
#grad1 {
height: 100px;
background: red;
}
#grad2 {
height: 100px;
background: yellow;
}
See it working here: https://jsfiddle.net/eosx5cgc/
CSS3 gradient we can simply generate in online tools, like colorzilla
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff0000+0,ff0000+50,ffff00+51,ffff00+100 */
background: rgb(255,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 50%, rgba(255,255,0,1) 51%, rgba(255,255,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 51%,rgba(255,255,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,0,0,1) 0%,rgba(255,0,0,1) 50%,rgba(255,255,0,1) 51%,rgba(255,255,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffff00',GradientType=0 ); /* IE6-9 */
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>
I'm trying to add css radial gradient as background to my webpage, when I add html5 doctype <!DOCTYPE html> the radial background becomes (landscape) stripe. Is there wrong with my css radial-gradient code why it is not working well with HTML5
Output:
with html5 doctype <!DOCTYPE html>
Without html5 doctype
My code (no html5 doctype):
HTML
<!-- <!DOCTYPE html> -->
<!-- header -->
<body>
<div class="content"></div>
</body>
CSS
body {
background: rgba(32,61,227,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(32,61,227,1)), color-stop(100%, rgba(10,38,69,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
background: radial-gradient(ellipse at center, rgba(32,61,227,1) 0%, rgba(10,38,69,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#203de3', endColorstr='#0a2645', GradientType=1 );
}
Adding <!DOCTYPE HTML> seems to minimize the height of html and body to 0%
Try adding this to your CSS
html, body {
height: 100%;
}
This will solve your issue
I was testing gradient compatibility across all browsers and I found that the gradient had different effects on FireFox. Allow me to demonstrate the test.
The Code
<html>
<head>
<style type="text/css">
body{
background: -moz-linear-gradient(top left , white , black 25%);
background: -o-linear-gradient(top left , white , black 25%);
background: -webkit-linear-gradient(top left , white , black 25%);
background: -khtml-linear-gradient(top left , white , black 25%);
background: -ms-linear-gradient(top left , white , black 25%);
background: linear-gradient(top left , white , black 25%);
}
</style>
</head>
<body>
</body>
</html>
Results:
Google Chrome - 35.0
FireFox - 30.0
IE11
Opera 22.0
Safari 5.1.7
As you can see the gradient takes a different shape in case of Firefox. How to overcome this limitation?
In fact the body does not have explicit height set, by default its margin is about 8px, so its height is just about 8px. Here in this demo, we set background-repeat to no-repeat, you'll see why by default (repeat) it renders to what you saw. However I have to admit that there is a special thing about the body element. Looks like the background can still render outside the body. You can use element inspector to see that the body's height is in fact just about 8px. But the background can still be rendered out of it. We can solve this by setting the height explicitly:
body {
/* ... */
height:100vh;
}
Or:
body, html {
height: 100%;
}
Or you can also set the background-size explicitly:
body {
/* ... */
background-size:100vw 100vh;
}
use this. http://jsfiddle.net/Vca7f/1/ this will work in IE9 also. to generate more gradient you can visit http://www.colorzilla.com/gradient-editor/ its very good tool for generating gradient.
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
Try this, it will be helpful to you which supports all the browsers:
CSS:
div{
width:500px;
height:200px;
background:#000;
background: -webkit-linear-gradient(-45deg, #fff 0%, #000 36%, #000 51%, #000 71%, #000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #fff 0%, #000 36%, #000 51%, #000 71%, #000 100%); /* Opera 11.10+ */
background: -moz-linear-gradient(-45deg, #fff 0%, #000 36%, #000 51%, #000 71%, #000 100%); /* FF3.6+ */
background: -webkit-gradient(left top, right bottom, color-stop(0%, #fff), color-stop(36%, #000), color-stop(51%, #000), color-stop(71%, #000), color-stop(100%, #000));/* Chrome,Safari4+ */
background: -ms-linear-gradient(-45deg, #fff 0%, #000 36%, #000 51%, #000 71%, #000 100%); /* IE 10+ */
background: linear-gradient(135deg, #fff 0%, #000 36%, #000 51%, #000 71%, #000 100%);/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#000', GradientType=1 );/* IE6-9 fallback on horizontal gradient */
}
HTML:
<div></div>
IE9 Support:
Support for full multi-stop gradients with IE9 (using SVG).
Add a "gradient" class to all your elements that have a gradient,
and add the following override to your HTML to complete the IE9 support:
<!--[if gte IE 9]
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
Fiddle Demo
The existing answers, while doing a good job at solving the problem, don't address the actual question, which is: why don't all browsers behave the same with this source?
The answer is, Quirks mode. Different browsers have different quirks!
So the way to make the example code come out the same is to insert a proper DOCTYPE declaration on top
<!DOCTYPE html>
so that the document is displayed in Standards mode. Then the differences will disappear; all browsers will show it the way Firefox does now.
I got it to display exactly how I want it in Firefox, but with every other browser there seems to be some problems. This website isn't exactly public (as in, no one knows of it) yet as I'm still trying to get things to display properly, but the URL is: http://www.mixbin.net (just view:source for the code - there's nothing server side interfering)
Firefox: Perfect.
Chrome: Perfect except the bottom margin is being ignored in the .content class.
Opera: Perfect except the bottom margin is being ignored in the .content class.
Safari: Displays gradient properly but forces a refresh as soon as you scroll halfway down the page.
Internet Explorer: Displays gradient properly but .content div is cut off where the gradient stops.
background:linear-gradient(top, #000000 0%, #353535 100%); /*W3C*/
background:-moz-linear-gradient(top, #000000 0%, #353535 100%); /*FF3.6+*/
background:-ms-linear-gradient(top, #000000 0%, #353535 100%); /*IE10+*/
background:-o-linear-gradient(top, #000000 0%, #353535 100%); /*Opera 11.10+*/
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #353535)); /*Chrome,Safari4+*/
background:-webkit-linear-gradient(top, #000000 0%, #353535 100%); /*Chrome10+,Safari5.1+*/
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#353535',GradientType=0 ); /*IE6-9*/
No images wanted. So please don't reply with, "just make a background image".
Update 2: Everything (including IE), is now working. I switched these two lines from:
background:-webkit-linear-gradient(top,#000000 0,#353535 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#000),color-stop(100%,#353535));
To:
background:-webkit-linear-gradient(top, #000000, #353535);
background:-webkit-gradient(linear, left top, left bottom, from(#000000), to(#353535));
If your CSS for the gradient is:
background: linear-gradient(top, #000000 0%, #353535 512px);
there will be no need for a <div> with height 512px. Unfortunately, this solution works for every browser except IE.
Back to your extra background <div> approach. I copied and modified your code a little. This works for all browsers.
body {
background: #353535;
}
.content {
background-color: white;
height: 1000px;
margin: 20px auto;
width: 300px;
z-index: 2;
position: relative;
}
#background {
position: absolute;
top: 0;
height: 512px;
width: 100%;
background: linear-gradient(top, #000000 0%, #353535 100%); /*W3C*/
background: -moz-linear-gradient(top, #000000 0%, #353535 100%); /*FF3.6+*/
background: -ms-linear-gradient(top, #000000 0%, #353535 100%); /*IE10+*/
background: -o-linear-gradient(top, #000000 0%, #353535 100%); /*Opera 11.10+*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #353535)); /*Chrome,Safari4+*/
background: -webkit-linear-gradient(top, #000000 0%, #353535 100%); /*Chrome10+,Safari5.1+*/
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#353535', GradientType=0); /*IE6-9*/
}
<body>
<div id="background"></div>
<div class="content"></div>
</body>
This might not be the solution you are looking for but, since you will have to use hacks to make it looks the same on different browsers, why wont you use an image of the gradient and repeat it in the background.
If your background gradient is 300px, make the image with 300px height and 1px width (image size wont be over 1KB), and repeat it in your background
background: url('bg_gradient.jpg') repeat-x 0px 0px;
It will work on all the browsers without any hassle;