Home/Explore/

Fading long section

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
Fading a long section to indicate there is more content.
<div style="
    /* Used to position the faded element */
    position: relative;
">
    <!-- Main content -->
    <div style="
        /* Height */
        height: 200px;

        /* Scrollable */
        overflow-y: scroll;
    ">
        ...
    </div>

    <!-- The faded element -->
    <div style="
        /* Displayed at the bottom */
        bottom: 0;
        left: 0;
        position: absolute;

        /* Size */
        height: 30px;
        width: 100%;

        /* Gradient background */
        background: linear-gradient(rgba(255, 255, 255, 0.01), #fff);
    " />
</div>
Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!