Home/ Questions/Q 6331489
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T18:04:43+00:00

Is it possible to use CSS3 gradients for styling fill property? I know that

  • 0

Is it possible to use CSS3 gradients for styling fill property?

I know that SVG provides their own gradients. But the ideal solution for me would be:

.button{
    fill:#960000;
    fill: -webkit-gradient,linear,left bottom,left top,
          color-stop(0.45, #37304C),color-stop(0.73, #534D6B));
    fill: -moz-linear-gradient(center bottom,#37304C 45%,#534D6B 73%);
    ...
}

When I tried to use SVG gradients, I got stucked when I tried to extract style attribute to external stylesheet. It seemed that fill:url(#linearGradientXYZ) didn’t work as the gradient was defined in .svg file.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    No it’s not yet possible to use CSS3 gradients for the fill property. The good news though is that it’s being discussed by the CSS and SVG workgroups, and SVG.next will depend on CSS3 Image Values (which defines the CSS gradient syntax). See http://www.w3.org/2011/07/29-svg-minutes.html#item08.

    Note that the base url for the fill:url(...) by default is the file that contains this rule. So if you want to move fill:url(#linearGradientXYZ) to an external stylesheet remember to add the full path to the file containing that gradient definition, eg. fill:url(../images/gradients.svg#linearGradientXYZ).

    • 0