JSFiddle - React, Tailwind, and code Playground
HTML
<div class="demo-wrapper">
<div class="ellipse">
<h3>Elliptical Gradient</h3>
Lorem Ipsum</div>
</div>
CSS
.demo-wrapper div {
width: 910px;
height: 250px;
padding: 10px;
margin: 25px auto;
border: 5px solid #fff;
}
.ellipse {
background-image: radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800);
}
JavaScript
/*
ellipse.css({'background-image': 'radial-gradient(center bottom, ellipse cover, #ffeda3, #ffc800)'});
*/
var ellipse = $('.ellipse'),
style = $("style"),
prefixes = {
"MozAnimation": "-moz-",
"webkitAnimation": "-webkit-",
"msAnimation": "-ms-",
"oAnimation": "-o-"
};
$.each(prefixes, function (key, val) {
if (key in ellipse[0].style) {
$("style").text(function (i, text) {
return text.replace(/(radial-gradient)/g, val + "$1")
})
}
});
console.log(style.text(), ellipse.css("backgroundImage"))