Radial gradients

Radial gradients don't work out of the box in Versoly, yet.


I needed a radial gradient for the Finsweet Client First 11 build in Versoly.  

Radial gradient doesn’t work out of the box in Versoly, so we add this line to the

       "gradient-radial" : "radial-gradient(var(--tw-gradient-stops))"

Add the , at the end of the previous line then add the code.

We also need Gradient Color Stops, but this is in TW 3.3.1 which is not available in Versoly yet.

Adding Vanilla CSS for the full gradient

(I used an online gradient maker which gave me lots of of optional versions, but as all modern browsers can use radial gradient we only need the plain vanilla version)

background : #0caeff;

background : -moz-radial-gradient(center, ellipse cover, #0caeff 0%, #c9d3ef 27%, #aed2ff 53%, #9bffa5 74%, #d798e1 100%);

background : -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #0caeff), color-stop(27%, #c9d3ef), color-stop(53%, #aed2ff), color-stop(74%, #9bffa5), color-stop(100%, #d798e1));

background : -webkit-radial-gradient(center, ellipse cover, #0caeff 0%, #c9d3ef 27%, #aed2ff 53%, #9bffa5 74%, #d798e1 100%);

background : -o-radial-gradient(center, ellipse cover, #0caeff 0%, #c9d3ef 27%, #aed2ff 53%, #9bffa5 74%, #d798e1 100%);

background : -ms-radial-gradient(center, ellipse cover, #0caeff 0%, #c9d3ef 27%, #aed2ff 53%, #9bffa5 74%, #d798e1 100%);

background : radial-gradient(ellipse at center, #0caeff 0%, #c9d3ef 27%, #aed2ff 53%, #9bffa5 74%, #d798e1 100%); filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#0caeff', endColorstr='#d798e1', GradientType=1 );

Recently Viewed Articles