<div class="container">
.container {
  display: block;
  width: 100vw;
  height: 100vh;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;

  // Set the purple to blue gradient for use as the main border below featured story.
  &::before {
    background-image: linear-gradient( to right, #6a26b5, #007bc2 );
    height: 100px;
    top: 0;

  // Apply a white overlay to create the faded out affect over the top.
  &::after {
    background-image: linear-gradient( to top, #ffffff, rgba( 255, 255, 255, 0.7 ) );
    height: 90px;
    top: 10px;
View Compiled
/* A pen to create both a border with a gradient effect applied and a background that matches but fades to white. */
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.