This radial gradient is not working on firefox:
background-image: -moz-radial-gradient(bottom center, 900px 900px, #7dd134 0%, #137f1e 90%, #137f1e 100%);
It is Mozilla`s bug they do not support defined size radial gradient.
Here is the bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=627885
Related
I'm aware of multiple other issues regarding an issue with using transparent as a colour value in Safari and needing to use rgba(255, 255, 255, 0) as an alternative, but it's not working for me. I'm using the gradient as a "Show More" fade, which has a dark gray background, and the gradient still doesn't look smooth in Safari:
And in Chrome:
Demo: CodePen
The :after gradient is background-image: linear-gradient(rgba(255,255,255,0) 0%, #2b2b2b 100%) and the section background colour is #2b2b2b. What do I need to use for the gradient instead?
Try fading from black (instead of white) to #2b2b2b:
background-image: linear-gradient(rgba(0,0,0,0) 0%, #2b2b2b 100%)
I am having an issue where a gradient which transitions from transclucent (~.1 opacity) on the edges of the page to solid white appears lighter on the edges in Safari. In Chrome and Firefox the edges are the darkest. In Safari it seems that a white background is being assumed that it added to the gradient. Thus, the edges are lighter than the middle of the gradient, as the gradient transitions from translucent to opaque white.
The page in question can be found here.
The relevant CSS is:
background: linear-gradient(to right,
rgba(100,100,255,0.15) 0%,
rgba(255,255,255,1) 20%,
rgba(255,255,255,1) 80%,
rgba(100,100,255,0.15) 100%);
A screenshot of this CSS looks like this: I have tried adding a "fallback color" (really a background-image) to the CSS to help Safari, since it seems to be assuming a white background which, when added to the translucent rgba(100,100,255,0.15) makes for lighter edges. However, this just makes everything darker and doesn't overcome the lightness of the edges. The result of that can be seen in the below screenshot. The CSS for this was:
background: linear-gradient(to right,
rgba(100,100,255,0.15) 0%,
rgba(255,255,255,1) 20%,
rgba(255,255,255,1) 80%,
rgba(100,100,255,0.15) 100%)
rgba(100, 100, 255, .15);
This looks like:
I used a css generator to create
background: radial-gradient(ellipse at center, rgba(49,35,174,1) 0%, rgba(125,72,195,1) 50%, rgba(125,72,195,1) 50%, rgba(201,109,215,1) 100%);
It is not displaying correctly. The gradient is rendering as stripes of the two colors. Is there a way to fix this?
Just noticed that gradient in Chrome is't equal. Using this css
background: linear-gradient(to right, #00a4e4 0%, #00a4e4 50%, #369044 50%, #369044 100%);
In my case the left part is 657px, and the right part is 650px. This happen only in Chrome.
Fiddle
Any fix for this?
Let's say the height of the div is 34px and the width is 480px. The div should look like this:
and I don't want it to actually use an image, just CSS. Is it possible?
It is with CSS3. There's even a handy gradient generator which takes the guesswork out of it. Of course, this is completely unsupported in IE8 and under.
Edit
For the sake of completeness, as sluukkonen mentioned, IE does support gradients in CSS using the filter filter:progid:DXImageTransform.Microsoft.Gradient.
It is possible with CSS3;
Example: (black and grey)
mydiv
{
background-image:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.15, rgb(189,189,189)),
color-stop(0.58, rgb(0,0,0)),
color-stop(0.79, rgb(0,0,0))
)
-moz-linear-gradient(
center bottom,
rgb(189,189,189) 15%,
rgb(0,0,0) 58%,
rgb(0,0,0) 79%
)
}
But this only works in Mozilla and webkit browsers, IE8 and under will ignore this.
Hope it helps :)
There are ways to do this with -webkit-gradient and -moz-linear-gradient 'functions' as values of background-image. These use different syntax but will be standardised if the gradient spec makes it into CSS 3's final release.
/* webkit example */
background-image: -webkit-gradient(
linear, left top, left bottom, from(rgba(50,50,50,0.8)),
to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);
/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);