linear-gradient css in jsx

Question

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>
    );
  }
});

What @AKASHPANDEY meant it that the snippet in your question is not working. Here is the explanation about snippets and how to use them: stackoverflow.blog/2014/09/16/… — Mosh Feu
– Mosh Feu, Commented Aug 1, 2018 at 10:56
can someone please edit this to make it working, as I can't figure it out, how make a react snippet work — Rizvan
– Rizvan, Commented Aug 2, 2018 at 10:10
@MoshFeu added this snippet to just for viewing purpose, as there is nothing to run in this. My code is not running because of 'linear-gradient' thing in this, one can just look at this and tell me the problem about this so that I can fix it. — Rizvan
– Rizvan, Commented Aug 2, 2018 at 11:42

arseneoaa · Accepted Answer · 2019-07-18 18:31:09Z

2

If you want to use inline styles you could do:

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

answered Jul 18, 2019 at 18:31

arseneoaa

3965 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user9578753 · Accepted Answer · 2022-02-01 19:55:04Z

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.

Collectives™ on Stack Overflow

linear-gradient css in jsx

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related