I’m looking to add a gradient to the top of some independently scrolling tab content so the content isn’t sliced off at the bottom of the tabs when you scroll up. The goal is to have the content fade to white behind the tabs above. How would I go about adding this gradient so that it lays above the tab content and achieves this effect in the best way? The images below better explain the effect I am going for:
Obviously I wouldn’t want it covering up the first card but I figured I could resize it between the tabs and the card so no content is covered unless you scroll.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <div class="col-xs-12 col-sm-12 col-md-6"> <div class="row r-tabs"> <div class="tab-bar"> <button class="bar-item tab-active" onclick="openTab(event, 'section1')">Summary</button> <button class="bar-item" onclick="openTab(event, 'section2')">Images</button> <button class="bar-item" onclick="openTab(event, 'section3')">Contact</button> <button class="bar-item" onclick="openTab(event, 'section4')">Help</button> </div> </div> <div id="section1" class="tab-content"> <div class="card"> <div class="card-body model-btn-card"> <div class="viewing text-black"> </div> </div> </div>
You can style the :before element for the div, something like:
div { position: relative; } div: before { content: ''; top: -2px; left: 0; width: 100%; height: 15px; background: linear-gradient(to top, transparent, #fff); } Didn’t test it, but something like this should work.