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:


  • Sam Colburn
  • Mar 8 2019
  • Reviewed
  • S. Adnan Sami commented
    19 Nov, 2022 10:32pm

    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
    10 Jan, 2021 09:06pm

    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