'linear-gradient css in jsx

I downloaded a template from somewhere and trying to convert it to a react component, but one thing that I got stuck on, I am not able to get what linear-gradient is for in this css and how can I modify this to work in jsx inline style.

let component = React.createClass({
  render: function() {
    return (

      <div className="container" style={{boxSizing: 'border-box', width: 600, height: 340, margin: '0 auto', position: 'relative', WebkitPerspective: 1000, MozPerspective: 1000, perspective: 1000, MozTransform: 'perspective(1400px)', msTransform: 'perspective(1400px)', WebkitTransformStyle: 'preserve-3d', MozTransformStyle: 'preserve-3d', transformStyle: 'preserve-3d', WebkitPerspectiveOrigin: 'right', MozPerspectiveOrigin: 'right', perspectiveOrigin: 'right'}}>
        <div className="card" style={{boxSizing: 'border-box', width: 600, height: 340, boxShadow: '0 27px 55px 0 rgba(0, 0, 0, .7), 0 17px 17px 0 rgba(0, 0, 0, .5)', position: 'relative', WebkitTransform: 'rotate(0deg)', MozTransform: 'rotate(0deg)', msTransform: 'rotate(0deg)', transform: 'rotate(0deg)', WebkitTransformOrigin: '100% 0%', MozTransformOrigin: '100% 0%', msTransformOrigin: '100% 0%', transformOrigin: '100% 0%', WebkitTransformStyle: 'preserve-3d', MozTransformStyle: 'preserve-3d', transformStyle: 'preserve-3d', transition: '.8s ease-in-out'}}>
          <div className="front" style={{boxSizing: 'border-box', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'white', WebkitBackfaceVisibility: 'hidden', MozBackfaceVisibility: 'hidden', backfaceVisibility: 'hidden', display: 'flex', WebkitJustifyContent: 'center', justifyContent: 'center', WebkitAlignItems: 'center', alignItems: 'center', zIndex: 2, WebkitTransform: 'rotateY(0deg)', MozTransform: 'rotateY(0deg)', msTransform: 'rotateY(0deg)', transform: 'rotateY(0deg)'}}>
            <div className="logo" style={{boxSizing: 'border-box', width: 200, height: 200, position: 'relative', background: 'linear-gradient(45deg, #F5AF69 50%, #F4EED7 50.9%),
  linear-gradient(90deg, #FC5135 50%, #4E203C 50%),
  linear-gradient(-45deg, #F5AF69 50%, #E8D9A0 50.9%), 
  linear-gradient(#FC5135 50%, #4E203C 50%),
  linear-gradient(-45deg, #F5AF69 50%, #E8D9A0 50.9%),
  linear-gradient(90deg, #FC5135 50%, #4E203C 50%),
  linear-gradient(45deg, #FC5135 50%, #F5AF69 50.9%)', backgroundSize: '50px 50px, 100px 50px, 50px 50px, 200px 100px, 50px 50px, 100px 50px, 50px 50px', backgroundRepeat: 'no-repeat', backgroundPosition: '0 0, 50px 0px, 150px 0, 0 50px, 0 150px, 50px 150px, 150px 150px'}}><span style={{boxSizing: 'border-box', display: 'block', background: '#4E203C', width: 29, height: 32, position: 'absolute', top: '99.5px', left: 130, borderRadius: '0 50% 50% 0'}} /></div>
          </div>
          <div className="back" style={{boxSizing: 'border-box', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'white', WebkitBackfaceVisibility: 'hidden', MozBackfaceVisibility: 'hidden', backfaceVisibility: 'hidden', WebkitTransform: 'rotateY(-180deg)', MozTransform: 'rotateY(-180deg)', msTransform: 'rotateY(-180deg)', transform: 'rotateY(-180deg)', fontFamily: '"Arimo", sans-serif'}}>
            <h1 style={{boxSizing: 'border-box', color: '#FC5135', textTransform: 'uppercase', fontWeight: 400, lineHeight: 1, marginTop: 110, textAlign: 'center', fontSize: 40}}>Helen Parker<span style={{boxSizing: 'border-box', color: '#4E203C', display: 'block', fontSize: '.45em', letterSpacing: 3}}>design <i style={{boxSizing: 'border-box', fontStyle: 'normal', textTransform: 'none', fontFamily: '"Playfair Display", serif'}}>&amp;</i> photography</span></h1>
            <ul style={{boxSizing: 'border-box', margin: 0, width: '100%', listStyle: 'none', position: 'absolute', bottom: 30, left: 0, padding: '0 1%'}}>
              <li style={{boxSizing: 'border-box', width: '31.3333333333%', margin: '0 1%', float: 'left', padding: 10, border: '2px solid #FC5135', borderRadius: 4, position: 'relative', textAlign: 'center', color: '#4E203C'}}>+1-111-111-11-11</li>
              <li style={{boxSizing: 'border-box', width: '31.3333333333%', margin: '0 1%', float: 'left', padding: 10, border: '2px solid #FC5135', borderRadius: 4, position: 'relative', textAlign: 'center', color: '#4E203C'}}>[email protected]</li>
              <li style={{boxSizing: 'border-box', width: '31.3333333333%', margin: '0 1%', float: 'left', padding: 10, border: '2px solid #FC5135', borderRadius: 4, position: 'relative', textAlign: 'center', color: '#4E203C'}}>my-site.com</li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
});
cssreactjsjsx


Solution 1:[1]

If you want to use inline styles you could do:

<div style={{backgroundImage: 'linear-gradient(to right, #439bfd, #73b3fb)'}}...

Solution 2:[2]

I was stuck on the same problem, I found this solution which may be more of a hack than an actual clean solution. I added the code in a css page, and then I inspected the element. For example : for * background: linear-gradient(to right, #000 0%, #000 50%, #fff 50% #fff 100%)*; if you inspect it using inspect element, you will find : -webkit-gradient(linear, left top, right top, from(#000), color-stop(50%, #000), color-stop(50%, #fff)) . So just add this last line in the inline style of your react compenent:

<div className="card" style={{background:"-webkit-gradient(linear, left top, right top, from(#000), color-stop(50%, #000), color-stop(50%, #fff))"}}/>

for my example, I used this one above instead of :

<div className="card" style={{background: linear-gradient(to right, #000 0%,  #000 50%, #fff 50% #fff 100%)"}}/>

So in conclusion, add this to a css file, it will work, see the output in the "inspect element", and use it and edit it as you like in the inline style of your react js component.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 arseneoaa
Solution 2 The Dnino

Related Questions