Search code examples
cssradial-gradients

CSS Radial Gradient browser differences

I have a really simple CSS radial gradient, which looks significantly different in different in Safari and others:

<style>
  body {
     background: #000;
  }
  div {
    height: 200px;
    width: 200px;
    background-image: radial-gradient(100px, #1493a4 0%, transparent 100%);
  }
</style>

<div></div>

Any ideas, how I could make them all look like the Safari version?

Screenshot of Safari enter image description here

Safari                         Firefox

Fiddle: https://jsfiddle.net/2234zy6o/3/

Solution

  • I finally found a simple solution: Safari needs an own style:

    background-image: -webkit-radial-gradient(#1493a4, transparent);

    Just make sure to add it after the standard definition, other browsers then use the standard one and ignore the -webkit one, while Safari sees the first but then finds -webkit and ignores the standard.

    But it's not quite the same, nevertheless. So I did some 'interpolation' and added some stops:

    background-image: -webkit-radial-gradient(100px,
   #1493a4 0%,
   rgba(20,147,164,0.4) 40%,
   rgba(20,147,164,0.2) 55%,
   transparent 100%
);

    It's still not the same but quite similar - at least I can live with it.