htmlcss

How can I create the Netflix Hero Curved Divider with CSS Radial Gradient?

I am cloning the Netflix hero section and trying to create the red curved divider between the hero and the Trending Now Section. The curve direction and color don't match the real site. What I want:

Following is the Screenshot for the Red Curved Divider I want: NetflixNepalHeroSection

Following is what I am getting: MyHeroCurveScreenshot

My code:

:root {
  --netflix-red: #e50914;
  --bg-dark: #000000;
  --text-gray: #b3b3b3;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background: var(--bg-dark);
  color: #ffffff;
}


/* HEADER & NAVBAR */

.header {
  position: relative;
  min-height: 100vh;
  color: #ffffff;
  background: radial-gradient(circle at top,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0.6) 60%,
      #000 100%),
    url("images/header.PNG") center / cover no-repeat;
  overflow: hidden;
}

.nav {
  position: relative;
  z-index: 2;
  padding: 1.5rem 3.5rem;
}


.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* .logo{
    height:36px;
} */



.btn-signin {
  background: var(--netflix-red);
  color: #ffffff;
  padding: 0.45rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

/* HERO SECTION */

.hero {
  position: relative;
  min-height: calc(100vh-80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem 5rem;
  z-index: 1;
}


.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, transparent 0, rgba(0, 0, 0, 0.6) 45%, #000 100%);
}

.hero-content {
  position: relative;
  max-height: 950px;
  text-align: center;
  z-index: 1;
}


.hero-content h1 {
  font-size: clamp(2.5rem, 4vw + 1rem, 3.5rem);
  font-weight: 900;
  margin-bottom: 0.75rem;
}


.hero-content h2 {
  font-size: 1.5rem;
  font-weight: 400;
  margin-bottom: 0.75rem;
}

.hero-content p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}



/* EMAIL FORM - CSS GRID */
.hero-form {
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto;
  gap: 0.5rem;
  max-width: 700px;
  margin: 0 auto;
}


.hero-form input {
  padding: 0.9rem 0.75rem;
  border-radius: 4px;
  border: 1px solid #606060;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-size: 1rem;
}


.hero-form::placeholder {
  color: #8c8c8c;
}


.btn-get-started {
  padding: 0.9rem 1.6rem;
  background: var(--netflix-red);
  border: none;
  border-radius: 4px;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-get-started .arrow {
  margin-left: 0.25rem;
}


.form-message {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: var(--text-gray);
}


/* Concave Curve */
.header::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  /* sit on the bottom edge */
  transform: translateX(-50%);
  width: 140%;
  height: 100px;
  background:
    radial-gradient(ellipse at bottom,
      rgba(255, 15, 79, 0.9) 0%,
      /* bright pink */
      #e50914 40%,
      /* Netflix red */
      transparent 70%);
  z-index: 0;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<header class="header">
  <nav class="nav">
    <div class="nav-inner">
      <!-- Netflix logo from attached SVG (embedded as data URI)-->
      <svg style="background-color:#000000" class="logo" xmlns="http://www.w3.org/2000/svg" height="24" width="89" viewBox="-153.6 -69.1855 1331.2 415.113"><path fill="#d81f26" d="M140.803 258.904c-15.404 2.705-31.079 3.516-47.294 5.676L44.051 119.724v151.073C28.647 272.418 14.594 274.58 0 276.742V0h41.08l56.212 157.021V0h43.511zm85.131-157.558c16.757 0 42.431-.811 57.835-.811v43.24c-19.189 0-41.619 0-57.835.811v64.322c25.405-1.621 50.809-3.785 76.482-4.596v41.617l-119.724 9.461V0h119.724v43.241h-76.482zm237.284-58.104h-44.862V242.15c-14.594 0-29.188 0-43.239.539V43.242h-44.862V0H463.22zm70.266 55.132h59.187v43.24h-59.187v98.104h-42.433V0h120.808v43.241h-78.375zm148.641 103.507c24.594.539 49.456 2.434 73.51 3.783v42.701c-38.646-2.434-77.293-4.863-116.75-5.676V0h43.24zm109.994 49.457c13.783.812 28.377 1.623 42.43 3.242V0h-42.43zM1024 0l-54.863 131.615L1024 276.742c-16.217-2.162-32.432-5.135-48.648-7.838l-31.078-79.994-31.617 73.51c-15.678-2.705-30.812-3.516-46.484-5.678l55.672-126.75L871.576 0h46.482l28.377 72.699L976.705 0z"/></svg>
      <a href="#" class="btn-signin">Sign In</a>
    </div>
  </nav>

  <section class="hero">
    <div class="hero-overlay"></div>
    <div class="hero-content">
      <h1>Unlimited movies, TV shows and more</h1>
      <h2>Starts at USD 2.99. Cancel anytime.</h2>
      <p>Ready to watch? Enter your email to create or restart your membership</p>
      <form class="hero-form" id="hero-form">
        <input type="email" id="email" placeholder="Email address" required />
        <button type="submit" class="btn-get-started">
                        Get Started <span class="arrow">&gt;</span>
                    </button>
      </form>

      <p id="faq-message" class="form-message" aria-live="polite"></p>
    </div>
  </section>

</header>

<main>
  <section class="trending">
    <h2>Trending Now</h2>
  </section>
</main>

Solution

  • You can use an SVG image as a background.

    Here is the "raw" SVG:

    <?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="200">
  <defs>
    <filter id="f1">
      <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
    </filter>
    <linearGradient id="g1">
      <stop offset="44%" stop-color="purple" />
      <stop offset="50%" stop-color="#e50914" />
      <stop offset="56%" stop-color="purple" />
    </linearGradient>
    <mask id="m1">
      <rect width="100%" height="100%" fill="white" />
      <circle cx="800" cy="6210" r="6200" fill="black" />
    </mask>
    <mask id="m2">
      <circle cx="800" cy="6210" r="6200" fill="white" />
    </mask>
  </defs>
  <circle fill="navy" mask="url(#m2)" opacity="50%" cx="800" cy="-1340" r="1450" filter="url(#f1)" />
  <circle fill="url(#g1)" mask="url(#m1)" cx="800" cy="5200" r="5200" />
</svg>

    And here, the SVG is used as a background image:

    body {
  background-color: black;
}

div {
  width: 100%;
  height: 200px;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYwMCIgaGVpZ2h0PSIyMDAiPgogIDxkZWZzPgogICAgPGZpbHRlciBpZD0iZjEiPgogICAgICA8ZmVHYXVzc2lhbkJsdXIgaW49IlNvdXJjZUdyYXBoaWMiIHN0ZERldmlhdGlvbj0iMjAiIC8+CiAgICA8L2ZpbHRlcj4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZzEiPgogICAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0icHVycGxlIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2U1MDkxNCIgLz4KICAgICAgPHN0b3Agb2Zmc2V0PSI1NiUiIHN0b3AtY29sb3I9InB1cnBsZSIgLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bWFzayBpZD0ibTEiPgogICAgICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ3aGl0ZSIgLz4KICAgICAgPGNpcmNsZSBjeD0iODAwIiBjeT0iNjIxMCIgcj0iNjIwMCIgZmlsbD0iYmxhY2siIC8+CiAgICA8L21hc2s+CiAgICA8bWFzayBpZD0ibTIiPgogICAgICA8Y2lyY2xlIGN4PSI4MDAiIGN5PSI2MjEwIiByPSI2MjAwIiBmaWxsPSJ3aGl0ZSIgLz4KICAgIDwvbWFzaz4KICA8L2RlZnM+CiAgPGNpcmNsZSBmaWxsPSJuYXZ5IiBtYXNrPSJ1cmwoI20yKSIgb3BhY2l0eT0iNTAlIiBjeD0iODAwIiBjeT0iLTEzNDAiIHI9IjE0NTAiIGZpbHRlcj0idXJsKCNmMSkiIC8+CiAgPGNpcmNsZSBmaWxsPSJ1cmwoI2cxKSIgbWFzaz0idXJsKCNtMSkiIGN4PSI4MDAiIGN5PSI1MjAwIiByPSI1MjAwIiAvPgo8L3N2Zz4=');
  background-size: contain;
  background-repeat: no-repeat;
}
    <div></div>