The Video's Four-Shadow Button Parses Cleanly in Chrome, but Stripe's Homepage "Get started" Button Has No Shadow at All

The CSS the video shows is valid and renders as described, but its premise that "premium SaaS" buttons carry four shadows fails on Stripe's own homepage, where every "Start now" and "Get started" link computes to box-shadow: none. The artifact is a 49-second vertical clip (ffprobe reports 49.29 seconds of HEVC video at 1080x1920 and 24 fps across 1,183 frames, with 44,100 Hz stereo AAC audio running 49.35 seconds, 2,028,239 bytes on disk). TikTok's metadata puts the post at 2026-10-14 20:51:05 UTC from uploader aniakubow, channel nickname "Code with Ania Kubow", with the audio credited as "original sound" and a two-word description, "Do you agree?". At capture on 2026-10-19 the counters read 48,700 views, 1,912 likes, 50 comments, 274 reposts, and 1,623 saves. I read all 25 extracted frames and all 144 transcript words across 8 Whisper segments; every segment starts before the 49.35-second audio end, so none were discarded. Every frame after the title card uses the same three-band layout: a light grey slide on top with a monospace label, a dark code bar across the middle carrying three macOS-style window dots, the burned-in caption, and the placeholder line box-shadow: inset.., inset.., .., .. }, and the presenter below, a blonde woman in a light patterned shirt with a Lacoste crocodile logo, seated in front of a bookshelf and a large colorful painting. The slides step through "ONE SHADOW VS FOUR" (frames 2 and 3, with labels "1 shadow" and "4, and 2 are light"), "WHY YOUR BUTTONS LOOK CHEAP" with a tilted sticker "they need 4 shadows" (frames 4 and 5), "YOURS NEXT TO A PREMIUM SAAS SITE" (frame 6), "SAME COLOUR, SAME RADIUS" with chips reading #5b5bf0 and border-radius: 10px (frame 7), "THE DIFFERENCE IS LIGHT" (frame 8), a button under a cone of light (frame 9), four dashed chips "1 top light", "2 bottom shade", "3 contact", "4 glow" (frames 10 and 11), then one slide per layer with the matching line of the four-line box-shadow highlighted and a magnifier circle on the button edge (frames 12 through 20), "LIGHT BOUNCING OFF IT" with three dashed yellow rays (frames 21 and 22), "A GENTLE TOP-TO-BOTTOM GRADIENT" with swatches #7c7cff and #5b5bf0 (frame 23), "ON PRESS, FLIP IT" with chips "resting: lit" and "pressed: inset 0 2px 4px" (frame 24), and a dark code editor holding the complete .btn and .btn:active rules (frame 25). Whisper rendered "SaaS" as "sas" and the second "inset" as "insert"; the burned-in captions carry the correct words.

Every value in the snippet checks out against MDN, and Chrome 131 renders all four layers

Frame 25 shows the full rule set:

.btn {
  background: linear-gradient(#7c7cff, #5b5bf0);
  box-shadow: inset 0 1px 0 #ffffff59,
    inset 0 -2px 0 #0003,
    0 1px 2px #0006,
    0 8px 24px -6px #5b5bf099;
}

.btn:active {
  translate: 0 1px;
  box-shadow: inset 0 2px 4px #0004;
}

I checked each construct against MDN. box-shadow accepts a comma-separated list, and "the first specified shadow is on top", so the white highlight paints over the other three. The inset keyword "changes the shadow from an outer box-shadow to an inner box-shadow", and inset shadows "appear above the background but below the content", which is why the highlight sits on top of the gradient without covering the label. The fourth length is the spread radius, and "negative values will cause the shadow to shrink", so -6px pulls the 24px-blur glow inward before it blurs. MDN lists box-shadow as Baseline widely available since July 2015.

The colors use 4- and 8-digit hex. MDN's hex-color page documents the alpha digit ("0, or 00, represents a fully transparent color, and f, or ff, a fully opaque one") and the shorthand expansion where "1 means 11". Working that through: #ffffff59 is white at 89/255, or 35 percent; #0003 expands to #00000033, black at 20 percent; #0006 is black at 40 percent; #5b5bf099 is the button's own purple at 60 percent; and the pressed-state #0004 is black at 27 percent.

linear-gradient() with no angle "defaults to to bottom", so linear-gradient(#7c7cff, #5b5bf0) runs lighter at the top and darker at the bottom, matching the "gentle top to bottom gradient" line in the narration and the swatch bar in frame 23.

To confirm the whole thing parses, I loaded the exact CSS into headless Chrome 131 and read the computed style. The browser returned all four layers: rgba(255, 255, 255, 0.35) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px -2px 0px 0px inset, rgba(0, 0, 0, 0.4) 0px 1px 2px 0px, rgba(91, 91, 240, 0.6) 0px 8px 24px -6px, with background-image: linear-gradient(rgb(124, 124, 255), rgb(91, 91, 240)). Nothing was dropped.

Stripe's homepage buttons have no shadow; Linear's primary button has five, none of them a highlight

The narration says "put your button next to one from a premium SaaS site and yours looks flat", and frame 6 labels the comparison "yours" versus "premium saas". The video names no site. I checked two.

On stripe.com I read the computed style of every link whose text begins "Start now", "Get started", or "Contact sales". All of the filled buttons returned box-shadow: none, background-image: none, a flat rgb(83, 58, 253) fill, and a 4px radius. Stripe's homepage call to action is a flat button with one color and no shadow at all.

On linear.app the "Get started", "Sign up", and "Open app" links share a five-layer stack, every layer black: rgba(0,0,0,0) 0 8px 2px, rgba(0,0,0,0.01) 0 5px 2px, rgba(0,0,0,0.04) 0 3px 2px, rgba(0,0,0,0.07) 0 1px 1px, rgba(0,0,0,0.08) 0 0 1px, on a rgb(229, 229, 230) fill with a pill radius. There is no inset highlight and no colored glow. Linear's secondary "Contact sales" link is the one that resembles the video's recipe: four layers, two of them inset white (0 0 0 1px at 3 percent and 0 1px 0 at 4 percent), a 1px black ring at 60 percent, and a 0 4px 4px drop at 10 percent.

So the layered approach is real on at least one SaaS site, and the "two of them are light" structure matches Linear's secondary button closely. The generalization does not hold. One of the two sites I checked ships its primary button with zero shadows, and the other uses five dark layers rather than four with highlights. I am correcting the video's framing here: four shadows with two light layers is one studio's taste, and a flat single-color button is also what a premium SaaS homepage looks like in October 2026.

"Two aren't even real shadows" describes a lighting model; the spec counts four shadows

The narration says expensive buttons "have four, and two aren't even real shadows", and frame 3's label reads "4, and 2 are light". Frames 13 and 14 make the argument visually: the chip "a shadow" is struck through and replaced by "light · #ffffff59".

In CSS terms all four entries are box-shadow layers; MDN has no separate concept of a highlight. What the video is describing is the convention of treating the top inset as a specular highlight where light from above hits the edge, the bottom inset as the unlit face, the tight 0 1px 2px as the contact shadow where the button meets the page, and the large 0 8px 24px -6px glow in the button's own color as bounced light. That reading is coherent, and the frame 10 chips "1 top light", "2 bottom shade", "3 contact", "4 glow" state it plainly. The claim is about intent, and the numbers back it: the top layer is white, the other three are dark or tinted. Readers should take "aren't real shadows" as a design explanation rather than a property of the CSS.

The idea of stacking several shadows to imitate a single light source has a documented precedent. Josh Comeau's Designing Beautiful Shadows in CSS, first published 2021-09-13 and updated 2026-04-27, states: "Instead of using a single box-shadow, we'll stack a handful on top of each other, with slightly-different offsets and radiuses." That article covers outer shadows only and does not discuss an inset top highlight, so the highlight-plus-shade pairing in the video goes beyond it.

The pressed state swaps four layers for one and nudges the button 1px

Frame 24 reads "ON PRESS, FLIP IT" with the chips "resting: lit" and "pressed: inset 0 2px 4px", and the narration says "on press flip it, highlight gone". The .btn:active rule in frame 25 does two things: translate: 0 1px moves the button down one pixel, and a single inset 0 2px 4px #0004 replaces the four-layer stack, so the white top highlight, the bottom shade, the contact shadow, and the glow all disappear and one 27 percent black inner shadow at the top takes their place. Chrome's computed rule for the active state came back as translate: 0px 1px; box-shadow: rgba(0, 0, 0, 0.267) 0px 2px 4px inset.

The standalone translate property is newer than the rest of the snippet. MDN's translate page describes it as a way "to specify translation transforms individually and independently of the transform property" and lists it as Baseline widely available since August 2022. On anything older the button would still change shadow on press but would not move, because a browser drops an unrecognized declaration on its own and keeps the rest of the rule. The video does not mention this, and for a 2026 audience it is a footnote, but anyone shipping to older embedded browsers should know that transform: translateY(1px) is the long-supported equivalent.

Who is speaking

The uploader is Ania Kubów, a software developer who runs the YouTube channel Code with Ania Kubów and has appeared on the freeCodeCamp podcast, episode 187. TikTok's channel field spells the name "Code with Ania Kubow" without the diacritic; the YouTube channel title uses "Kubów". The video's title and description are both the two words "Do you agree?", which is why the source link above carries that text rather than a description of the content.

Key Takeaways

The CSS shown in frame 25 is valid: four comma-separated box-shadow layers, 4- and 8-digit hex alpha, a default top-to-bottom linear-gradient(), and a standalone translate property all check out against MDN, and Chrome 131 computes every layer as written.
Stripe's homepage call-to-action buttons compute to box-shadow: none with a flat rgb(83, 58, 253) fill, so "premium SaaS buttons have four shadows" fails on the first site I checked.
Linear's primary buttons stack five black shadows with no highlight, and its secondary "Contact sales" button is the closest real match to the video's four-layer, two-light recipe.
"Two aren't even real shadows" is a lighting explanation, and the spec treats all four as shadows; the alpha values are 35 percent white, 20 percent black, 40 percent black, and 60 percent of the button's own purple.
The translate property used in the pressed state has been Baseline since August 2022; transform: translateY(1px) is the older equivalent.
Layering several shadows to fake one light source was documented by Josh Comeau in 2021, though his article covers outer shadows only.

Resources

MDN: box-shadow establishes the comma-separated syntax, that "the first specified shadow is on top", the inset behavior, negative spread shrinking the shadow, and Baseline since July 2015.
MDN: hex-color establishes that #RGBA and #RRGGBBAA are valid, how single digits duplicate, and how the alpha digit maps from 00 to ff.
MDN: translate establishes the standalone property's two-value syntax and its Baseline date of August 2022.
MDN: linear-gradient() establishes that an unspecified direction "defaults to to bottom".
stripe.com is where I read box-shadow: none and rgb(83, 58, 253) on the "Start now" and "Get started" links on 2026-10-19.
linear.app is where I read the five-layer black stack on "Get started" and the four-layer stack with two inset white layers on "Contact sales" on 2026-10-19.
Josh Comeau: Designing Beautiful Shadows in CSS establishes the 2021 precedent for stacking multiple shadows and that the article does not cover inset highlights.
Code with Ania Kubów on YouTube and the freeCodeCamp podcast page establish the presenter's identity and spelling.