How can we improve the Microsoft Edge developer experience?

Implement conic gradients from CSS Image Values Level 4

Conic gradients [1] are useful for a number of effects on the Web that cannot be emulated in any other way (see [2]). They can be implemented in many graphics libraries today (e.g. Cairo) via mesh gradients. Please implement them.


895 votes
Sign in
Sign in with: Facebook Google
Signed in as (Sign out)
You have left! (?) (thinking…)
Lea Verou shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →


Sign in
Sign in with: Facebook Google
Signed in as (Sign out)
  • qpeuling commented  ·   ·  Flag as inappropriate

    Would be very nice! Trying to implement it as a preloader now :)

    Best regards!

  • gustav gans commented  ·   ·  Flag as inappropriate

    Yes, please!
    Would also love to have those for CanvasRenderingContext2D, too.
    And ctx.createMeshGradient() etc.
    I would also happily use a CSS mesh-gradient().
    And diamond- and repeating diamond gradients, preferably with arbitrary number of sides / segments.
    No biggie but still quite convenient would be a ctx.createRepeatingLinearGradient (IMHO ctx2d gradient API is not very nice at all. I would rather set a css gradient string as ctx.fillStyle or even set a (serialization of a) mutable gradient object, ideally one that can be obtained from CSSStyleDeclaration or so. Why are Canvas-, CSS- and SVG gradients so different anyway?).
    I guess Houdini and custom shading could also do the trick.
    Well and I wonder why call it conic-gradient and not angular-gradient? Wouldn't radial-gradient have to be named spheric-gradient then?
    Sorry for being OT, but I don't know where else to put these suggestions.

  • Lea Verou commented  ·   ·  Flag as inappropriate

    Just wanted to say, it’s super easy for Edge to implement this, since you guys are only on one platform and Direct2D 1.1 supports mesh gradients, of which conic gradients are just a special case. Please dare to lead the way here, it’s one of those graphical features that authors get really excited about and it’s super easy for you to implement (unlike e.g. Safari who needs to wait for Core Graphics to add mesh gradients — which is coming).

  • John Smith commented  ·   ·  Flag as inappropriate

    One use case is for a Japanese website. To create that quintessential Japanese starburst background thing, also known as the Japanese Naval ensign. Would be cool to have this natively.

  • Lea Verou commented  ·   ·  Flag as inappropriate

    @Ryan, could you share the use case it came up for? Use cases are always useful :)

  • Anonymous commented  ·   ·  Flag as inappropriate

    Conic gradients are cool! We would like to have them implemented in the browser so that we can use them in the websites!

← Previous 1

Feedback and Knowledge Base