BRAND Netflix 2026 · Recipe: hero-arc

HEADER brand: Netflix; design_date: 2026-09; kind: effect; used_in: Page: home S2-S3 (bottom of the hero) evidence: measured on https://www.netflix.com/ (US) 2026-09-30 unless marked LOOK The hero does not end with a straight line: a very wide, shallow ellipse rises over its bottom edge like the top of a planet. The ellipse edge is a thin glowing line that runs from dark maroon at the sides through pink to Netflix red at the top center; under it a faint blue glow fades into the black page. It is static. STRUCTURE container 100px tall at the bottom of the hero (relative, z-index 1, overflow hidden) -> arc element (absolute, top 0, width 130% of the viewport, left -15%, height 100px) -> its ::before (z-index -1) paints the gradient line; content below starts 22px under the arc top and the main column is pulled up 32px over it KEY PARAMETERS arc element: border-radius 50% 50% 0 0 / 100% 100% 0 0; border 4px solid transparent; background #000000 with radial-gradient(50% 500% at 50% -420%, rgba(64,97,231,0.4) 80%, rgba(0,0,0,0.1) 100%) clipped to the padding box (the blue glow) line (::before): position absolute, inset 0, margin-top -4px, z-index -1, same border-radius, background linear-gradient(to right, #210d16 16%, #b82869, #e50914, #b82869, #210d16 84%); it shows only through the 4px transparent border, which makes a 4px gradient stroke along the curve placement: arc top at 788px of an 888px hero at 1440 (100px from the hero bottom); width 1852px at 1424px viewport MOTION none STATES all breakpoints: same construction; on mobile the 130% width makes the curve steeper at the sides (est); reduced motion: n/a HOW TO BUILD One absolutely positioned div wider than the viewport with an elliptical top radius, a transparent 4px border and a dark radial background; a ::before behind it with the horizontal red-pink gradient and the same radius, offset -4px so only the border ring shows. Overflow hidden on the parent keeps it inside the hero. PITFALLS the line is thin (4px) and red only at the very top center, fading to maroon at the edges; the glow under the line is blue, not red; do not add a drop shadow or blur; the arc must be wider than the viewport so its ends leave the screen SCREENSHOTS - file: netflix_2026_hero-arc_d1440_detail.jpg shows: crop of the home page at 1440 around the arc (y 640-1000): gradient line, blue glow, promo banner pulled up under it