Elliptical Radial Gradients

Currently, only circle radial gradients for backgrounds can be created in Webflow. However, ellipses can also be used for radial gradients in CSS. This option should be exposed in the Webflow interface to allow for the creation of elliptical radial gradient backgrounds.

 

Forum thread on this topic that was incorrectly closed (ellipses are not a custom shape, they are defined in the W3 specs): https://forum.webflow.com/t/how-to-create-an-elliptical-radial-gradient/42571

 

W3 specfication on radial gradients:

https://www.w3.org/TR/css3-images/#radial-gradients

  • Sam Colburn
  • Mar 8 2019
  • Reviewed
  • S. Adnan Sami commented
    November 19, 2022 22:32

    I know a potential workaround!


    Make a circular gradient and then 2D transform the DIV to squish it and make it elliptic.

  • Tom Auger commented
    January 10, 2021 21:06

    Totally agree. It should be a simple checkbox or toggle - it's just an additional parameter in the CSS rule.

    Use case: using a radial gradient that extends to the 4 sides of a non-square DIV to create, for example, an inverted vignette over a background image to make light text more legible.

  • +4