mdn / mdn/content

Rethink description comment format in CSS syntax boxes

Open
#40,500 23 comments 2 reactions 0 assignees View on GitHub
Content:CSS needs decision
Dominant language
Markdown
Stars
11k
Forks
23.2k
Avg merge
2d 9h
Merged PRs (30d)
331

Description

### MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

### What specific section or headline is this issue about?

Syntax

### What information was incorrect, unhelpful, or incomplete?

```css
/* Keyword values */
box-shadow: none;

/* A color and two length values */
/* | | */
box-shadow: red 60px -16px;

/* Three length values and a color */
/* | | | */
box-shadow: 10px 5px 5px black;

/* Four length values and a color */
/* | | | | */
box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);

/* inset, length values, and a color */
/* | | | */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow:
3px 3px red inset,
-1em 0 0.4em olive;
```

### What did you expect to see?

```css
/* Keyword values */
box-shadow: none;

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow:
3px 3px red,
-1em 0 0.4em olive;
```

### Do you have any supporting links, references, or citations?

I am trying to learn HTML & CSS and I noticed that the syntax examples for `box-shadow` were updated around 2023 in this [PR](https://github.com/mdn/content/pull/29013) to use generic descriptors like `` and ``, instead of the earlier more explicit syntax annotations such as:

```
/* offset-x | offset-y | blur-radius | spread-radius | color */
```

What used to be:

```
/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
```

Became:

```
/* Three length values and a color */
/* | | | */
box-shadow: 10px 5px 5px black;

/* Four length values and a color */
/* | | | | */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
```

As a learner, I found the older format much clearer and easier to reference. I only found about it as the video where I was learning it from showed the older content.

Would it be possible to restore the explicit syntax in comments OR at least explain to me why the newer content is better?

### Do you have anything more you want to share?

_No response_

### MDN metadata

Page report details

* Folder: `en-us/web/css/box-shadow`
* MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
* GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/box-shadow/index.md
* Last commit: https://github.com/mdn/content/commit/0cc9980e3b21c83d1800a428bc402ae1865326b2
* Document last modified: 2025-07-14T14:43:58.000Z

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.