I was testing a box-shadow effect in both Chrome and Firefox and I was surprised to see a drastic difference in rendering between the two browsers. Notably, Firefox's rendering was much darker. Here are two reference images:
The first image is rendered in Chrome 22, and the latter in Firefox 16, both running under Mac OS 10.8.2. I have no idea why the two images are rendering so differently. Here's the box shadow itself, same for both browsers:
box-shadow: 0px 1px 3px rgba(0,0,0,0.3), inset 0px 4px 2px -2px rgba(255,255,255,0.7), inset 0px -3px 1px -2px rgba(0,0,0,0.3), inset 0px -20px 200px -100px rgba(0,0,0,0.5);
For a live demo, you can see here. Mouse over the box to get the effect.
Is there any way I can fix this drastic difference in rendering?
You are using multiple box shadows so try doing this (also removes alpha from box shadows I have done this below for you to try)
If there is still a problem dou you have any fiddle or link for that so I can check properly
May be resetting css will help :
http://codepen.io/anon/pen/IteyC
You can create a media selector for Firefox which will be using a different style. You will have to play around with it. For example, I reduced the blur, the spread and turned up the opacity of the last inset box-shadow. So the CSS for the .box:hover should probably look something like this:
For more media selectors and other browser hacks you can visit BrowserHacks.com
This is a long standing bug in Chrome which is fixed for Chrome 73 (coming March 2019).
https://www.chromestatus.com/feature/6569666117894144
Note: This bug is older than forking Blink from WebKit. Safari ever had a different graphics engine.
https://bugs.chromium.org/p/chromium/issues/detail?id=179006
That's because Chrome and Firefox use different html renderers. I think that the drastic difference is caused by the raga color, try fading the shadow instead.