CODEWITHSUNDEEP
htmlcsssvg
Surender Thakran
Surender Thakran

Reputation: 4054

How to make a svg shape with circular gradient fill?

I am trying to make svg shapes with a circular gradient fill. Using <radialGradient> makes elliptical gradient fill as opposed to circular gradients as shown in this fiddle.

What i am looking for instead is a gradient fill similar to this:

enter image description here

Basically i need circular gradient fills irrespective of the svg shape. Can anyone suggest me a way to proceed?

Thanx in advance!!

Upvotes: 1

Views: 1325

Answers (2)

Nitesh
Nitesh

Reputation: 15739

Here you go.

WORKING DEMO

The CSS Change:

div{background: #264a75; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  #264a75 2%, #4176b6 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(2%,#264a75), color-stop(100%,#4176b6)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  #264a75 2%,#4176b6 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  #264a75 2%,#4176b6 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  #264a75 2%,#4176b6 100%); /* IE10+ */
background: radial-gradient(ellipse at center,  #264a75 2%,#4176b6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#264a75', endColorstr='#4176b6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ width:300px; height:150px; border:3px solid #385d8a;}

I hope this is what you are looking for.

Upvotes: 1

Bas van Dijk
Bas van Dijk

Reputation: 10703

You can use:

<svg>
  <defs>

    <radialGradient
       id="grad1" gradientUnits="userSpaceOnUse">
            <stop offset="0%" style="stop-color:hsl(212,52%,15%); "/>
            <stop offset="50%" style="stop-color:hsl(212,52%,35%); "/>
            <stop offset="100%" style="stop-color:hsl(212,52%,52%); "/>
    </radialGradient>

  </defs>

  <rect height="400" width="600" x="100" y="220" style="fill:url(#grad1);"></rect>

</svg>

Especially watch userSpaceOnUse It makes the gradient independent to the object. The downside is when you move your object around, you need to move the gradient as well.

enter image description here

http://jsfiddle.net/2Nc4b/

Upvotes: 4

Related Questions