Gradient that runs in a straight line from opposite ends

Is there a way to apply linear gradients from both the top and bottom to create smoother lines when text is scrolled?

I was able to achieve a linear gradient at the bottom using this code: 

<div className="vsebina" style={{WebkitMaskImage:'linear-gradient(180deg, #000 97%, transparent)'}}>
.

However, I am unsure how to apply another gradient to the top as they do not seem to work together:

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

Check out the demo here: https://stackblitz.com/edit/react-ts-stvhtr?file=App.tsx

css

Answer №1

@Igor's answer is on the right path, but it doesn't provide the exact solution you're looking for.

Check out this modified StackBlitz code snippet.

App.tsx - Modified Version

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="content"
                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>
  );
}

Answer №2

To create the effect of 2 gradients, you can make the middle of the background 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%);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to Create a Dynamic CSS Mobile Menu Animation

After checking out some online tutorials, I managed to get a hamburger menu working. However, I encountered an issue with the X icon not being symmetrical after the animation from 3 bars to an X. Here is the comparison: Before: https://gyazo.com/351864d8 ...

htmlcsscss-animations

How can we prevent the restoration of size effects in jQuery UI versions 1.9 and above?

After implementing jQuery UI 1.9 or newer, I noticed that the size effect returns to its original state. Below is a snippet of my code: http://jsfiddle.net/mQCxY/ $(function () { $('.circle').click(function () { $(this).effect("size ...

jquerycssjquery-ui

What causes the lack of impact when editing bootstrap.css files in an ASP.NET Core Web App?

As I dive into ASP.NET, I decided to start by creating a default Web App template in Visual Studio. To my surprise, despite having bootstrap.css files in the wwwroot folder, any changes I make to them seem to have no effect on the website's appearance ...

cssasp.netasp.net-corebootstrap-4bootstrap-modal

Google Maps introduces a new feature that creates a blur effect on

Currently, I am utilizing the sample code provided below to superimpose an element on a Google map. <!DOCTYPE HTML> <html> <head> <title>Google Map Test</title> <style> html, body { margin: 0; ...

javascripthtmlcssgoogle-maps

Unveil as you scroll - ScrollMagic

I am working on a skill chart that dynamically fills when the document loads. I am exploring the possibility of using ScrollMagic to animate the chart filling as the user scrolls down. After trying various combinations of classes and pseudo-classes in the ...

javascripthtmljquerycss

How can I customize the variables in Webpack for Sass and Foundation?

Currently, I am in the process of using webpack to manage all of my project assets. In my app.js file, I am loading and concatenating my assets with the help of ExtractTextPlugin: import 'foundation-sites/scss/normalize.scss'; import 'foun ...

csssasszurb-foundationmixinswebpack

Implementing grid items in CSS Grid that do not stretch the grid row and have a container that is scrollable

Here is my dilemma: I am looking to create a grid with a fixed number of columns (that can be adjusted via javascript) and a variable number of rows, all with equal heights. The rows will be determined by the number of grid items, which are represented a ...

cssangularscrollflexboxcss-grid

Adjust the size of the flex item based on the background image dimensions

Within a flexbox, there are flex items displayed Each flex item should appear as a clickable folder with specific text inside It seems that the only CSS way to achieve this is by using a background image. However, I want to accomplish the following: Cons ...

htmlcssflexbox

How can you align half of a circle on the bottom-center of a rectangle in a responsive way?

I'm working on a design where I have a large div taking up the width and some of the height, with a smaller circle that needs to be positioned half at the bottom/center of this div and half right after it. Everything seems to work fine until I increas ...

htmlcssresponsive-designresponsiveness

Troubleshooting a problem with CSS Matrix animations

Lately, I've been working on creating some matrix animations. However, I noticed an unusual issue. The code below seems to function differently across Firefox, Safari, and Chrome: @-moz-keyframes matrix { from { -moz-transform: matri ...

cssmatrix

Grid functionality in Bootstrap not responsive on mobile devices

I have created a grid structure for my website using bootstrap 3. It looks great on desktop, but when I resize the window it does not switch to mobile or tablet view. What am I doing wrong? On desktop, I want each panel to take up 1/6 of the row, and on ...

javascripthtmlcsstwitter-bootstrapresponsive-design

What is the method for switching the parent element following the adjustment of the selected child's opacity

I am trying to find a way to use CSS to adjust the parent element's opacity if it contains a child element with a specific class. Currently, I have only been able to achieve this on hover by adding a background color to the parent element's ::aft ...

htmlcss

Interacting with the column tags within HTML tables through the .NET WebControls Table in a programmatic way

As per the information provided on this website: The HTML5 table contains col tags... <table width="100%"> <col style="width:40%"> <col style="width:30%"> <col style="width:30%"> <tbody> ...

css.netasp.net-mvchtml

How can I attach :after and :before pseudo-elements to a submit button?

I'm attempting to enhance my submit button with :after/:before elements, but I'm having trouble getting it to work properly. Specifically, I want to add a swipe (Sweep To Right) transition effect on the button from left to right. Similar to - th ...

htmlcss

What is the best way to implement buttons dynamically in multiple divs created by Django using JavaScript loops?

I have been working on a Django project where I've created several HTML divs. My goal is to add a single button to each div. https://i.sstatic.net/DEIqL.png In the image provided, you can see a div with the class card-footer that I created using a Dj ...

javascripthtmlcssdjangodjango-templates

What could be the reason that the painting application is not functioning properly on mobile devices?

I am facing an issue with my painting app where it works perfectly on desktop browsers but fails to function on mobile devices. I tried adding event listeners for mobile events, which are understood by mobile devices, but unfortunately, that did not solve ...

javascripthtmlcss

Utilizing a flexbox container within a table container, implementing PRE tags for handling overflow

Currently, I am diligently working on an intricate DASHBOARD utilizing bootstrap-4. A peculiar issue arose with the implementation of <pre> within a Flexbox. However, upon closer inspection, it became evident that this was not a flexbox or <pre> ...

cssflexboxtwitter-bootstrap-4

What is the best way to position an element at the bottom of a div?

In the div, there are elements like h1, p, and a. The goal is to have the h1 at the top, the a at the bottom, and the p in the middle regardless of its height. Check out the jsfiddle for a live demo. Here is the source code: HTML <div class="box"> ...

htmlcss

Android WebView does not support rendering Persian fonts

I am having an issue with applying a Persian font to my html content, which contains both Persian and English text. The CSS is correctly applied except for the font itself. In the CSS, I have defined the font-face like so: @font-face{ font-family ...

androidhtmlcssfontswebview

Linking multiple font files of the identical typeface to their respective CSS styles

I recently purchased the Didot font from myfonts.com, which includes different styles such as regular, bold, italics, and bold italics (each in separate files). While using WordPress, I noticed that when my users write articles with bold and italic text, ...

cssfonts