Put a CSS Glow Ring Inside Elements

Build a reusable CSS glow ring that follows rounded card edges.

Introduction

30 Second Summary

Visual details often look fine at first glance, then a rounded corner exposes the shortcut. A flat inner highlight can make an otherwise polished card feel unfinished.

In this project, you will build a reusable card in plain HTML and CSS with a gradient glow ring that hugs its inside edge. You will compare an inset shadow with mask compositing, then make the finished glow respond to hover and keyboard focus.

What You'll Build

In your browser, the finished card shows a gradient ring tracing every rounded corner during hover or keyboard focus.

By the end of this project, you'll have:

A clear before-and-after comparison showing the limits of a flat inset box-shadow.
A reusable gradient glow ring that follows the card's rounded corners at desktop and phone widths.
An interactive card whose ring appears during hover or keyboard focus.
Secret Mission: Animate the gradient while adding a prefers-reduced-motion fallback that keeps the glow still.

Do I need anything before starting?

You need a browser plus a text editor. The project runs locally at no cost.

Before We Start

This project lives in one local HTML file. The browser renders it directly.

In this step, you'll prepare Visual Studio Code. You'll also open an empty project folder that keeps your work in one place.

In this step, get ready to:

Confirm Visual Studio Code opens.
Confirm a modern browser opens.
Create an empty glow-ring-card folder in Visual Studio Code.

Prepare Visual Studio Code

Visual Studio Code gives you a dedicated place to write the card's HTML and CSS. First, check whether it is already available on your computer.

Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
Type Visual Studio Code in the search bar.
Press Enter to try opening the editor.

✔️ Visual Studio Code opens

Great. Visual Studio Code is available for your project.

ⓧ Visual Studio Code is missing

Visual Studio Code needs to be installed before you create the project folder. Choose your operating system below.

macOS

The macOS download uses a disk image that contains the application.

Visit the official Visual Studio Code download page.
Download the macOS .dmg file.
Open the downloaded .dmg file.
Drag Visual Studio Code.app into the Applications folder.
Press Cmd+Space to open Spotlight.
Type Visual Studio Code in Spotlight.
Press Enter to launch the editor.

You should see a Visual Studio Code window. Your editor is ready.

Windows

The Windows installer asks you to confirm its setup options. The default selections are enough for this project.

Visit the official Visual Studio Code download page.
Download the Windows User Setup installer.
Open the downloaded installer.
Follow the installer prompts using the default selections.
Press the Windows key to open Windows Search.
Type Visual Studio Code in Windows Search.
Press Enter to launch the editor.

You should see a Visual Studio Code window. Your editor is ready.

Editor Still Won't Open?

On macOS, confirm that Visual Studio Code.app is inside the Applications folder.
On Windows, reopen the User Setup installer if Windows Search cannot find the editor.

Still stuck? Help me get Visual Studio Code installed and open.

Confirm Browser Access

A browser turns your local HTML into the card you can inspect. Use the browser included with your operating system for the visual checks.

macOS

Press Cmd+Space to open Spotlight.
Type Safari in Spotlight.
Press Enter to launch the browser.

Safari should open to a browser window. Your visual preview tool is ready.

Windows

Press the Windows key to open Windows Search.
Type Microsoft Edge in Windows Search.
Press Enter to launch the browser.

Microsoft Edge should open to a browser window. Your visual preview tool is ready.

Create Your Project Workspace

A dedicated folder keeps every part of the card together. Create it on your Desktop so it stays easy to find.

Visual Studio Code may show a Workspace Trust prompt after the folder opens. You created this empty folder yourself, so you can trust its contents.

Return to Visual Studio Code.
Click File in the top menu.
Select Open Folder....
Select Desktop in the folder picker.
Click New Folder.
Enter glow-ring-card as the folder name.

Before you open the folder, what do you expect Visual Studio Code to show for a brand-new project?

Click Select Folder on Windows or Open on macOS.
Select Yes, I trust the authors if the Workspace Trust prompt appears.
Check the Explorer sidebar in Visual Studio Code.

You'll see glow-ring-card at the top of the Explorer with no files beneath it. That's the setup complete: your blank workspace is ready for the card.

What Is a Workspace?

A workspace is the folder Visual Studio Code treats as one project. The Explorer sidebar shows every file you add inside it.

Folder Missing From Explorer?

Repeat the Open Folder... action if Visual Studio Code still shows its welcome screen.
Select the glow-ring-card folder itself before confirming the folder picker.

Need a hand? Help me open my project folder in Visual Studio Code.

Your setup is ready. Next up, you'll write the plain card that becomes the foundation for the inner glow.

Create a Card with an Inset Shadow

An inner ring makes a card's boundary visible without adding space outside the card. A CSS inset shadow gives you a simple baseline for that effect.

In this step, you'll build a standalone HTML page with a rounded card. You'll add one flat-colour inset ring so its visual limit is easy to spot.

In this step, get ready to:

Create a standalone page with card content.
Style the card with rounded corners and a flat inset shadow.

Build the plain card

The page needs a small amount of structure before you style the ring. An article element keeps the card content together.

Use your editor's new-file control to create index.html inside the project folder.
Add the page structure by copying the code below into index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inset Glow Card</title>
  <style>
    /* Center the demo so the card is easy to inspect. */
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: #0b1020;
      color: #f8fafc;
      font-family: system-ui, sans-serif;
    }
  </style>
</head>
<body>
  <!-- Keep the content simple so the edge treatment stays visible. -->
  <article class="card" tabindex="0">
    <h1>Inner Glow Card</h1>
    <p>A reusable card with a glow that sits inside its rounded edge.</p>
  </article>
</body>
</html>

What Does This Code Do?

The page metadata helps the layout fit both desktop and mobile browser widths.
The body styles place the demo in the centre of a dark page.
The article element holds the card's heading and supporting text.
The tabindex="0" attribute makes the card reachable from a keyboard.

Save index.html.
Return to the project folder in Finder on macOS or File Explorer on Windows.
Double-click index.html to open it in your modern browser.

You'll see centred heading and paragraph text on a dark page. This confirms the page structure and base styles loaded.

Page Not Opening?

Confirm the file is named index.html.
Check that index.html is saved inside the project folder.

Still stuck? Help me troubleshoot why my local HTML page is not opening in my browser.

Add the flat inset ring

An inset box-shadow draws inside an element's edge. Here it gives the card a rounded surface with a controlled glow colour.

In index.html, find the closing </style> tag.
Add the rounded card and inner ring by pasting this selector directly above </style>:

    /* Shape the card and draw a solid ring inside its edge. */
    .card {
      max-width: 24rem;
      padding: 2rem;
      border-radius: 1.5rem;
      background: #151c32;
      box-shadow: inset 0 0 0 3px #7c3aed;
    }

How Does the Ring Work?

The border-radius property rounds the card's corners.
The background property separates the card from the darker page.
The inset keyword places the shadow inside the card.
The 3px spread creates a narrow ring along the inner edge.

Save index.html.

Before you refresh, decide which result you expect: a changing colour or one flat colour.

Refresh the browser page.

You'll see a dark rounded card with a purple ring hugging its inner edge. The colour stays flat around the entire card.

Ring Not Visible?

Confirm the .card selector sits inside the <style> element.
Check that class="card" matches the selector exactly.
Make sure the box-shadow value includes inset.

Need a hand? Help me find why the inset ring is missing from my card.

Good work. Your card now exposes the shadow's key limitation through a visible flat-colour ring.

✔️ Awesome, I've got everything!

Your card is open in the browser with rounded corners and a flat inset ring. Make sure index.html is saved.

ⓧ I'd like to double check the full code

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inset Glow Card</title>
  <style>
    /* Center the demo so the card is easy to inspect. */
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      background: #0b1020;
      color: #f8fafc;
      font-family: system-ui, sans-serif;
    }

    /* Shape the card and draw a solid ring inside its edge. */
    .card {
      max-width: 24rem;
      padding: 2rem;
      border-radius: 1.5rem;
      background: #151c32;
      box-shadow: inset 0 0 0 3px #7c3aed;
    }
  </style>
</head>
<body>
  <!-- Keep the content simple so the edge treatment stays visible. -->
  <article class="card" tabindex="0">
    <h1>Inner Glow Card</h1>
    <p>A reusable card with a glow that sits inside its rounded edge.</p>
  </article>
</body>
</html>

Your flat ring gives you a clear baseline. Next, you'll replace the shadow with an inner ring that supports richer fills while following the same rounded corners.

Mask an Inner Ring Overlay

The flat inset shadow from the previous step gave your card a visible inner edge. Its single colour revealed the limit of drawing the glow as a shadow.

Now the ring needs its own layer. CSS masking lets that layer keep only its edge while the card content stays clear.

In this step, get ready to:

Remove the inset shadow from the card.
Anchor an overlay to the card.
Cut out the overlay centre to reveal a rounded inner ring.

Remove the flat shadow and anchor the overlay

An absolutely positioned overlay needs a containing block that controls its size. The card becomes that containing block so the new ring stays attached to its corners.

Switch back to index.html in your code editor.
Find the CSS rule that styles the card.
Locate the box-shadow declaration inside that rule.
Delete the box-shadow declaration.
Add a positioning rule after the existing card rule by copying this code:

.card {
  /* Anchor the overlay to this card */
  position: relative;
}

What Does Positioning Change?

The position: relative declaration makes the card the containing block for its absolutely positioned overlay. The card keeps its existing place in the page layout.

This positioning relationship makes the overlay follow the card's dimensions. It also keeps the overlay aligned when the card changes size.

Save index.html.
Return to the browser from the previous step.
Refresh the page.

You'll see the card without its flat inner ring. Good work. The old effect is gone while the rounded card and its content remain in place.

Still See the Flat Ring?

Search index.html for another box-shadow declaration applied to the card.
Confirm you saved index.html before refreshing the browser.

Still stuck? Help me find the CSS rule that is keeping the inset shadow visible.

Cut the overlay into an inner ring

A CSS mask controls which parts of a layer remain visible. Two opaque mask layers combine with exclude to remove their overlapping centre.

Padding creates a small gap between the two mask areas. That gap becomes the visible ring around the inside edge.

Add the overlay after the positioning rule by copying this code:

.card::before {
  /* Draw a solid overlay across the card */
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: #8b5cf6;
  pointer-events: none;

  /* Remove the centre and keep only the inner edge */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

How Does the Mask Make a Ring?

The ::before pseudo-element creates a decorative layer without adding another element to the HTML.
The position: absolute declaration places that layer over the card.
The inset: 0 declaration stretches the overlay to every card edge.
The border-radius: inherit declaration copies the card's rounded corners onto the overlay.
The two masks overlap across the centre. Their composite operation removes that overlap.
The pointer-events: none declaration lets pointer input pass through the decorative overlay.

Save index.html.

Before you refresh, where do you expect the solid colour to remain after the two mask layers combine?

Return to the browser.
Refresh the page.

You'll see a thin solid-colour ring hugging the card's rounded inside edge. The centre stays transparent so every piece of card content remains visible.

Does the Overlay Look Wrong?

Check both linear-gradient(#000 0 0) mask layers if the overlay appears as a solid rectangle.
Check mask-composite: exclude if the centre remains filled.
Check border-radius: inherit if the ring has square corners.
Check pointer-events: none if the overlay blocks interaction with the card.

Need another pair of eyes? Help me troubleshoot my masked inner ring.

✔️ Awesome, I've got everything!

Your masked overlay follows the card's rounded corners. Make sure index.html is saved before continuing.

ⓧ I'd like to double check the full code

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Inner Glow Card</title>
  <style>
    /* Use predictable dimensions for every element */
    * {
      box-sizing: border-box;
    }

    /* Centre the card on a dark page */
    body {
      min-height: 100vh;
      margin: 0;
      display: grid;
      place-items: center;
      padding: 24px;
      background: #070b14;
      color: #f8fafc;
      font-family: system-ui, sans-serif;
    }

    /* Style the reusable card surface */
    .card {
      width: min(100%, 560px);
      padding: 40px;
      border-radius: 24px;
      background: #111827;
    }

    .card {
      /* Anchor the overlay to this card */
      position: relative;
    }

    .card::before {
      /* Draw a solid overlay across the card */
      content: "";
      position: absolute;
      inset: 0;
      padding: 2px;
      border-radius: inherit;
      background: #8b5cf6;
      pointer-events: none;

      /* Remove the centre and keep only the inner edge */
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      mask-composite: exclude;
    }

    /* Keep the card copy compact and readable */
    .card h1 {
      margin: 0 0 12px;
      font-size: 32px;
    }

    .card p {
      margin: 0;
      color: #cbd5e1;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <article class="card">
    <h1>Build with focus</h1>
    <p>A reusable card with an inner glow that follows every rounded corner.</p>
  </article>
</body>
</html>

Your card now has a separate inner ring that follows its radius without covering the content. Next up, you'll replace the solid colour with a gradient that changes as it travels around the edge.

Apply a Gradient to the Ring

Your overlay now uses a CSS mask to cut out its centre. The ring follows the card's rounded edge with one flat colour.

A CSS gradient lets the colour change as it travels around that edge. In this step, you'll use one as the overlay fill.

In this step, get ready to:

Replace the overlay's solid fill with a CSS gradient.
Refresh the card to confirm the ring changes colour around its edge.

Replace the solid fill with a gradient

The overlay decides where the ring lives. Its fill decides what the ring looks like.

Switch back to index.html in the code editor from earlier.
Find the overlay style rule that contains the solid-colour fill.
Replace that solid colour with a CSS gradient using at least two colours.
Keep the existing mask declarations unchanged.
Save index.html.

How Do the Layers Work Together?

The overlay supplies the gradient. The mask limits that gradient to the ring-shaped edge.

The cut-out centre leaves the card content visible. The fill can change without covering the card.

Verify the colour change around the edge

The strongest proof is a continuous colour change that stays inside the rounded ring. Before you refresh, where do you expect the different colours to appear?

Switch back to the browser preview from earlier.
Refresh the page.

Your ring should now change colour around the rounded edge. The card content should remain visible through the cut-out centre.

You have the key effect working: multiple colours now share one rounded inner ring.

Still Seeing a Solid Ring?

Confirm the gradient is set on the overlay.
Restore the mask declarations if the card centre has become covered.
Refresh the browser after saving index.html.

Still stuck? Help me troubleshoot my gradient ring.

Your card now has a ring that changes colour around its radius. Next, you'll shape the mask so the glow can feel stronger on one edge.

Tune the Glow Strength

Your card's gradient now changes colour around the edge. The ring still pulls attention evenly around the whole shape.

This step gives the ring a directional light source. You will make one edge glow strongly while the opposite edge recedes.

In this step, get ready to:

Capture the current even glow as your baseline.
Tune the gradient overlay to create uneven glow strength.
Capture both versions in a side-by-side comparison.

Capture the even glow

A baseline preserves the current lighting before you change it. This gives you clear visual proof of the difference your next edits make.

Return to the browser preview from earlier.
Position the card fully inside the browser window.
Capture the current card with your computer's screenshot tool.
Save the image somewhere you can find again.

You should now have a screenshot showing the gradient ring with similar strength around every edge.

Tune the edge intensity

The CSS mask keeps the middle of the overlay clear. The gradient controls how strongly each part of the remaining ring glows.

What Controls the Glow Strength?

The mask defines the ring's shape. Keeping its rounded centre intact protects the card content.

Each gradient colour stop can use a different opacity. A higher opacity creates the bright edge while a lower opacity creates the faint edge.

Switch back to index.html in the code editor.
Locate the overlay rule containing the gradient background plus the mask declarations.
Choose the card edge that should draw the eye first.
Raise the opacity of the gradient colour stop that colours your chosen edge.
Save index.html.
Return to the browser preview.
Refresh the preview.

You should see your chosen edge pull more attention than it did in the baseline screenshot. The rounded centre should remain clear.

Switch back to index.html.
Lower the opacity of the gradient colour stop that colours the opposite edge.
Save index.html.
Return to the browser preview.
Refresh the preview.

The ring should now feel brightest along one edge. It should fade gently toward the opposite side without filling the centre.

Glow Still Looks Even?

Confirm that you edited the overlay's gradient instead of the card's content background.
Increase the difference between the two gradient stop opacities.
Restore the mask declarations from earlier if the centre becomes filled.

Still stuck? Help me tune the uneven glow.

Compare the two versions

A side-by-side comparison makes the lighting change easier to judge. Keeping both cards at a similar size helps the glow strength remain the only meaningful difference.

Before you compare them, which edge do you expect your eye to notice first?

Open your saved baseline screenshot in your computer's image viewer.
Place the baseline image on the left side of your screen.
Place the browser preview on the right side of your screen.
Resize the two windows until both cards appear at a similar scale.
Check that the rounded centre remains cut out in both versions.
Capture one screenshot containing both versions.

You should see the earlier evenly visible ring on the left. You should see a stronger edge fading toward a quieter edge on the right.

That comparison makes the lighting change clear. Your glow now guides the eye from a strong edge toward a quiet edge.

Next, you will make the ring react to hover plus keyboard focus so the lighting appears during interaction.

Reveal the Ring on Interaction

Your tuned gradient ring already follows the card's rounded edge. Its stronger side gives the card depth.

The glow currently stays visible while the card sits idle. This step turns it into feedback that appears during pointer or keyboard interaction.

In this step, get ready to:

Make the card part of the keyboard focus order.
Reveal the ring during pointer hover.
Confirm the ring appears during visible keyboard focus.

Make the card keyboard-focusable

Keyboard focus identifies the element that receives keyboard input. Adding tabindex="0" places the card in the page's natural tab order.

Switch back to index.html in the code editor from earlier.
Find the opening tag for the rounded card.
Add tabindex="0" to that opening tag.
Find the CSS rule that controls the masked gradient overlay.
Set its existing opacity declaration to 0.
Save index.html.
Return to the browser from earlier.
Refresh the page.

The ring should now be hidden while the card is idle. Your card content should remain unobscured.

Ring still visible?

Confirm the opacity declaration sits inside the masked gradient overlay rule.
Confirm you saved index.html before refreshing the browser.

Still seeing the ring? Help me find why my masked overlay remains visible.

Reveal the ring on pointer interaction

The :hover pseudo-class reacts when a pointer rests over the card. The :focus-visible pseudo-class reacts when the browser decides that keyboard focus needs a visible indicator.

Create one shared CSS rule that targets the masked overlay when your existing card selector matches either :hover or :focus-visible.
Set the overlay's opacity to 1 inside that shared rule.
Save index.html.
Return to the browser.
Refresh the page.
Move your pointer over the card.

You should see the tuned gradient ring appear around the inside edge. The centre should remain transparent.

Move your pointer away from the card.

The ring should disappear when the card leaves the hover state.

Hover ring not appearing?

Confirm both interaction selectors target the same masked overlay as your existing gradient rule.
Check that the default opacity is 0.
Check that the shared interaction rule sets opacity to 1.

Need another pair of eyes? Help me debug my hover and focus selectors.

Verify keyboard focus

Before you test with the keyboard, do you expect the focus state to reveal the same tuned ring as the hover state?

Move your pointer away from the card.
Press Tab until the card receives keyboard focus.

You should see the masked gradient ring appear around the focused card. Its stronger edge should remain visible while the opposite edge stays fainter.

Press Tab again to move focus away from the card.

The ring should disappear after focus moves away. That keyboard check is the payoff.

Tab does not reveal the ring?

Confirm the card's opening tag contains tabindex="0".
Keep pressing Tab if the browser moves through its own controls before reaching the page.
Confirm the keyboard selector uses :focus-visible exactly.

Still missing the focus state? Help me trace why the card is not revealing its ring during keyboard focus.

The interaction is ready. Next up, you'll check the card at a smaller width.

Check the Card on Mobile

Your card already reveals its ring during pointer hover or visible keyboard focus. A desktop-sized browser still leaves one question: does the masked ring stay aligned when the page becomes as narrow as a phone?

In this step, you'll open the same index.html file on your phone. The small screen gives the ring its final alignment test.

In This Step, Get Ready To:

Open the saved index.html page on your phone.
Check the card at a small mobile width.
Confirm the gradient ring follows every rounded corner.

Prepare a Real-Device Check

A mobile viewport reduces the available width around the card. The CSS overlay must scale with the card at that width.

Moving a local file onto a phone can be a little fiddly because every device handles files differently.

Save index.html in the code editor from earlier.
Send a copy of index.html to your phone with a file-transfer method you already use.

You should now see index.html listed in your phone's file browser.

Tap index.html to open it in your phone's browser.

You should see the card fit the narrow screen with its rounded shape intact.

You've cleared the fiddly part. Your phone is now rendering the same standalone page.

Page Not Rendering on Your Phone?

Use your phone's file options to open index.html in a browser.
Check that the transferred filename still ends with .html.
Transfer the latest saved copy from your computer if the page looks outdated.

Still stuck? Help me open my local HTML page on my phone.

Test the Small Viewport

A CSS mask removes the overlay's centre while leaving its edge visible. At a narrow width, the rounded edge is the fastest place to spot alignment problems.

Hold your phone in portrait orientation.
Refresh the page in your mobile browser.

The card should remain inside the screen with space around its outer edges.

Before you reveal the ring, do you expect its corners to keep the card's curve or drift away from it?

Tap the card once to reveal its interactive ring.
Inspect each rounded corner while the ring is visible.

You should see the gradient ring track every rounded corner with no square edges or gaps.

The stronger edge and fainter edge remain visible. The cut-out centre leaves the card content unobscured.

That is the final proof you needed. Your card keeps its masked gradient ring aligned at a small mobile width.

Ring Out of Place?

Transfer the latest saved copy of index.html if the ring does not appear.
Compare the overlay's border radius with the card's border radius if a corner looks square.
Confirm the mask still cuts out the overlay's centre if the card content becomes covered.

Need help narrowing it down? Help me diagnose my mobile glow-ring alignment.

Secret mission

Prove the Glow Ring Is Reusable

Your glow ring works on one card. Temporarily duplicate the card to prove the same styles and interactions work on another element, then restore your finished file.

Clean Up Your Resources

Keeping these local files creates no ongoing cost. Decide whether to save them for reuse, close the open tools for now, or delete the files entirely.

Resources you used:

The local index.html file containing your keyboard-focusable card with its masked gradient inner ring.
The glow-comparison screenshot showing the evenly visible ring beside the tuned ring.

Keep everything running

No action is needed. Choose this option if you want to reuse the inner glow in another project.

Keep index.html as your reusable card example.
Keep the glow-comparison screenshot as a visual reference for tuning mask strength.
Return to index.html whenever you want to copy the overlay and mask rules.

Pause - I'll come back to this later

There are no running servers or paid services to pause. Close the open tools while keeping your local files intact.

Close the browser tab displaying index.html.
Close the code editor.

Your card file and glow-comparison screenshot remain available when you return.

Delete - I don't want to use this again

This option removes both local artifacts. You can start fresh later.

Close the browser tab displaying index.html.
Switch back to the code editor.
Use the code editor's file controls to delete index.html.
Use the file controls on the device where you saved the glow-comparison screenshot to delete the image.
Confirm index.html no longer appears in the code editor's file list.
Confirm the glow-comparison screenshot no longer appears in your device's saved files.

Nice Work!

You did it! You built a reusable card with a gradient inner ring powered by CSS masking. You proved the finished effect works with pointer input, keyboard focus, and a small phone viewport.

You've learned how to:

Replace a flat inset box-shadow with a masked overlay that cuts out the card centre. The remaining ring follows the card's rounded corners.
Fill the inner ring with a gradient. Tune its mask to create a stronger edge plus a fainter edge. Capture the visual difference in a side-by-side screenshot.
Reveal the ring with :hover plus :focus-visible. Confirm the effect with keyboard navigation. Verify its alignment on a phone at a small viewport width.
Complete an optional Secret Mission to push your CSS masking skills further.

Ready to quiz yourself?