Linear gradient from two sides-CodePudding

I would like to apply linear-gradient from top to bottom and bottom to top, to create an effect of smoother lines, where text is scrolled.

I achieved linear-gradient at the bottom this way: <div className="vsebina" style={{WebkitMaskImage:'linear-gradient(180deg, #000 97%, transparent)'}}>.

But I don't know how to apply another gradient to the top (because both don't work together):

WebkitMaskImage:linear-gradient(0deg, #000 97%, transparent)

Demo: https://stackblitz.com/edit/react-ts-stvhtr?file=App.tsx

CodePudding user response：

The answer by @Igor is going in the right direction, but the result is not what you exactly want.

See the forked StackBlitz snippet.

Lep pozdrav. :)

App.tsx

import * as React from 'react';
import './style.css';

export default function App() {
  return (
    <div>
      <div
        className="razred"
        style={{ backgroundColor: 'rgba(0,0,0,.85)', height: '100vh' }}
      >
        <div className="fancy-short-banner-three ">
          <div className="container" style={{ height: '100vh' }}>
            <div className="bg-wrapper" style={{ overflow: 'auto' }}>
              <div
                className="vsebina"
                style={{
                  overflow: 'auto',
                  minHeight: '100%',
                  WebkitMaskImage:
                    'linear-gradient(180deg, transparent 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, transparent 100%)',
                }}
              >
                <div
                  className="row align-items-center"
                  style={{ maxHeight: '280px' }}
                >
                  <div className="col-lg-6">
                    <div className="title-style-one">
                      <h6>
                        Lorem Ipsum...
                      </h6>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            {/* /.bg-wrapper */}
          </div>
          {/* /.container */}
        </div>
        {/* /.fancy-short-banner-four */}
      </div>
    </div>
  );
}

CodePudding user response：

You can simulate the application of 2 gradients by setting the middle of the background as transparent.

background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 3%, rgba(0,0,0,0) 97%, rgba(0,0,0,1) 100%);