Emmet: CSS Gradients in One Line
In lessons 11-12 you mastered the core mechanics of CSS shorthands — unit inference, explicit units, multiple values, colors, vendor prefixes, and fuzzy matching. But the most complex CSS3 feature — gradients — hasn't been covered yet. Gradients are the most repetitive CSS3 property: a single
linear-gradientrequires four lines of cross-browser code (-webkit-+-moz-+-o-+ standard), and each line's parameter syntax differs across three versions (legacy webkit, current spec, W3C proposal). This lesson teaches Emmet's CSS3 gradient generator —lg(...)expands four cross-browser lines covering three syntax versions in one stroke, then combines all mechanisms from the previous two lessons to build a complete button style.
1. What You'll Learn
lg(...)linear gradient shorthand: auto-expands to 4 cross-browser lines (webkit + moz + o + standard), covering 3 syntax versions- Gradient direction parameters:
lg(left, #fff, #000)andlg(top, #fff, #000) - Multi-color stops with positions:
lg(#fff, #ccc 50%, #000)— the50%is the position of#ccc rg(...)radial gradient: same structure aslg(...), defaults from center outward- Hands-on: 7-property button style (
bgc+c+p+bdrs+tdn+fz+fw) in one line
2. A Frontend Developer's Real Story
(1) Pain Point: Cross-Browser Gradient Code + Button Styles — A Soul-Crushing Experience
Alice is building the "Sign Up Now" button on a SaaS product landing page. She wants a white-to-light-gray linear gradient background — visually more polished than a solid color. She Googles "linear-gradient cross-browser syntax", copies and pastes the result:
background: -webkit-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: -moz-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: -o-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: linear-gradient(to right, #fff 0%, #f0f0f0 100%);
Four lines of cross-browser code, with each line having slightly different parameters (webkit/moz/o use left, standard uses to right). She needs to copy this 5 times (primary button, secondary button, hover state, active state, disabled state), changing color values each time. That's 20 lines of gradient code × 5 copy-paste cycles = 100 lines.
Even worse, the button also needs a complete set of styles: gradient background (4 lines) + text color (1 line) + padding (1 line) + border-radius (1 line) + text decoration removal (1 line) + font-size (1 line) + font-weight (1 line) + cursor (1 line) = 11 lines. Alice spends 15 minutes just on button CSS. She thinks: CSS3 gradients are a staple of modern design — can't I just type a few characters, a few values, and hit Tab to get 4 lines of cross-browser code?
(2) The Emmet Gradient Generator Solution
Emmet provides a CSS3 gradient generator — lg(...) (linear gradient) and rg(...) (radial gradient). You write a "normal gradient definition" (direction + color stops) inside the parentheses, and Emmet auto-expands it into 4 cross-browser lines covering webkit/moz/o + standard across 3 syntax versions.
Alice's gradient button shorthand:
lg(left,#fff,#f0f0f0)
One line expands to 4 cross-browser lines with automatic color-stop position handling. This single shorthand reduces her gradient code from 20 lines to 1.
For the complete button style, Alice writes all 7 properties in one line:
bgc#2c3e50+c#fff+p10-20+bdrs4+tdn+fz16+fw700
47 characters, 7 Tab presses, 11 lines of complete button CSS in 12 seconds. What used to take 15 minutes now takes 12 seconds — a 75x speed improvement.
(3) Benefits
The CSS3 gradient generator combined with CSS shorthand is Emmet's ultimate weapon for styling. The former eliminates the repetitive labor of "4 cross-browser lines + 3 syntax versions", while the latter compresses common UI component styles (buttons, cards, forms) into a single line. After this lesson, Alice's button styling goes from 15 minutes to 12 seconds, and gradient cross-browser code from 20 lines to 1 shorthand. This lesson also marks the conclusion of Phase 4 — Phase 5 moves into editor Actions, expanding Emmet from "writing shorthands" to "editing acceleration".
3. Core Definition of CSS3 Gradient Generators
CSS3 gradients are one of designers' favorite visual effects, but the cross-browser syntax is incredibly tedious — a single linear-gradient requires three vendor-prefixed versions (webkit/moz/o), each with parameter syntax differing across three versions (legacy webkit, current spec, W3C proposal).
Emmet provides two gradient generator keywords — lg(...) and rg(...) — that automatically expand to 4 cross-browser lines, covering all 3 syntax versions.
graph TB
A[lg Gradient Shorthand] --> B[lg Linear Gradient]
A --> C[rg Radial Gradient]
B --> B1[lg direction? + colors + stops]
B1 --> B2[direction optional: left/right/top/bottom]
B1 --> B3[color stops: #fff, #ccc 50%, #000]
C --> C1[rg + colors + stops]
C1 --> C2[default from center outward]
D[Expansion: 4 Cross-Browser Lines] --> D1[-webkit-linear-gradient]
D --> D2[-moz-linear-gradient]
D --> D3[-o-linear-gradient]
D --> D4[linear-gradient to version]
B -.-> D
C -.-> D
style A fill:#3b82f6,color:#fff
style B fill:#10b981,color:#fff
style C fill:#8b5cf6,color:#fff
style D fill:#ef4444,color:#fff
style D1 fill:#fef3c7
style D2 fill:#fef3c7
style D3 fill:#fef3c7
style D4 fill:#fef3c7
background or background-image shorthands (e.g., bg:lg(...), bgc:lg(...)), or written standalone in a shorthand context (e.g., a line containing just lg(...)). When used as a property value, Emmet intelligently inherits the current line's property name (see the bg+ character shorthand for details).
4. Linear Gradient lg(...): Direction + Color Stops
lg(...) is shorthand for linear-gradient(...), with the parameter structure lg(direction?, color stops...).
(1) Basic Linear Gradient: Default Direction
When the direction parameter is omitted, Emmet defaults to gradient from top to bottom.
| Shorthand | Key Expansion Content | Description |
|---|---|---|
lg(#fff,#000) |
-webkit-linear-gradient(top, #fff, #000);-moz-linear-gradient(top, #fff, #000);-o-linear-gradient(top, #fff, #000);linear-gradient(to bottom, #fff, #000); |
Top-to-bottom (default) |
lg(#fc0,red) |
Same structure, colors #ffcc00 and red |
Any colors |
lg(#fff,#ccc,#000) |
Three-color gradient | Evenly distributed by default |
(2) Gradient Direction Parameter
The direction parameter is the first optional parameter of lg(...), using CSS keywords (left, right, top, bottom).
| Shorthand | Key Expansion Content | Direction |
|---|---|---|
lg(left,#fff,#000) |
-webkit-linear-gradient(left, #fff, #000);... linear-gradient(to right, #fff, #000); |
Left to right |
lg(right,#fff,#000) |
-webkit-linear-gradient(right, #fff, #000);... linear-gradient(to left, #fff, #000); |
Right to left |
lg(top,#fff,#000) |
-webkit-linear-gradient(top, #fff, #000);... linear-gradient(to bottom, #fff, #000); |
Top to bottom |
lg(bottom,#fff,#000) |
-webkit-linear-gradient(bottom, #fff, #000);... linear-gradient(to top, #fff, #000); |
Bottom to top |
left = starting from the left), while the standard version uses the ending direction (to right = ending on the right = left to right). Emmet automatically handles this bidirectional conversion — you only need to write the starting direction (left), and Emmet adds the to prefix plus the mirrored direction for the standard version.
(3) Multi-Color Stops with Position Parameters
Each color stop can include a position parameter (0% to 100%) controlling where the color sits in the gradient.
| Shorthand | Key Expansion Content | Description |
|---|---|---|
lg(#fff,#000) |
Evenly distributed (default 0% and 100%) | 2-color basic |
lg(#fff,#ccc 50%,#000) |
-webkit-linear-gradient(top, #fff 0%, #ccc 50%, #000 100%);... linear-gradient(to bottom, #fff 0%, #ccc 50%, #000 100%); |
3-color + middle at 50% |
lg(left,#fc0 30%,red) |
... linear-gradient(to right, #fc0 30%, red 100%); |
Turns orange at 30% |
lg(#fff 0%,#ccc 25%,#000 75%) |
Three colors, custom positions | Full position control |
5. Radial Gradient rg(...): From Center Outward
rg(...) is shorthand for radial-gradient(...), with a structure similar to lg(...) but defaults to center-outward (radial).
(1) Basic Radial Gradient
| Shorthand | Key Expansion Content | Description |
|---|---|---|
rg(#fff,#000) |
-webkit-radial-gradient(center, #fff, #000);-moz-radial-gradient(center, #fff, #000);-o-radial-gradient(center, #fff, #000);radial-gradient(circle at center, #fff, #000); |
Center to outward |
rg(#fc0,#f00) |
Same structure, orange to red | Radial highlight effect |
(2) Radial Gradient Shape and Position
Radial gradients support more complex shape parameters (circle, ellipse) and position parameters (top left, center).
| Shorthand | Key Expansion Content | Description |
|---|---|---|
rg(circle,#fff,#000) |
Circular radial | Default shape |
rg(ellipse,#fff,#000) |
Elliptical radial | Ellipse shape |
rg(circle at top left,#fff,#000) |
Circle at top-left corner | Custom position |
circle, ellipse, at) may have slight support differences across Emmet versions. Basic 2-color radials (rg(#fff,#000)) have the best compatibility; test complex parameters in your editor first.
6. Hands-On Examples
The following 5 examples cover the core scenarios of gradient generators combined with CSS shorthand.
▶ Example: Basic Linear Gradient lg(#fff,#000) (Difficulty ⭐)
The most common gradient — white to black, top to bottom, 4 cross-browser lines covering 3 syntax versions.
Shorthand:
lg(#fff,#000)
Expansion:
background: -webkit-linear-gradient(top, #fff 0%, #000 100%);
background: -moz-linear-gradient(top, #fff 0%, #000 100%);
background: -o-linear-gradient(top, #fff 0%, #000 100%);
background: linear-gradient(to bottom, #fff 0%, #000 100%);
Output:
TEXT 📖 Display onlyExplanation: In `lg(#fff,#000)`, `lg` is the shorthand keyword for `linear-gradient`, and `#fff` and `#000` are two color stops (Emmet auto-assigns 0% and 100% positions). Emmet expands to 4 cross-browser lines: ① `-webkit-linear-gradient` (legacy Chrome/Safari); ② `-moz-linear-gradient` (legacy Firefox); ③ `-o-linear-gradient` (legacy Opera, deprecated); ④ standard `linear-gradient` (W3C proposal version, using `to bottom` instead of `top`). These 4 lines cover gradient syntax for all browsers from 2010–2026. Note: Emmet defaults the `lg(...)` shorthand as a value for the `background` property (it also supports `background-image`).
▶ Example: Gradient Direction lg(left,#fff,#000) (Difficulty ⭐⭐)
Horizontal gradient — left to right, verifying the bidirectional conversion of the direction parameter.
Shorthand:
lg(left,#fff,#000)
Expansion:
background: -webkit-linear-gradient(left, #fff 0%, #000 100%);
background: -moz-linear-gradient(left, #fff 0%, #000 100%);
background: -o-linear-gradient(left, #fff 0%, #000 100%);
background: linear-gradient(to right, #fff 0%, #000 100%);
Output:
TEXT 📖 Display onlyExplanation: `left` is the direction parameter — in legacy webkit/moz/o it means "starting from the left" (gradient proceeds left to right); in the standard version it must be converted to `to right` (ending on the right = left to right). Emmet automatically handles this **starting vs. ending semantic conversion** — you only write the starting direction (`left`, `right`, `top`, `bottom`), and Emmet adds the `to` prefix and mirrors the direction for the standard version. This design saves you from caring about version differences. After expansion, the browser renders a horizontal gradient background from white on the left to black on the right.
▶ Example: Multi-Color Stops lg(#fff,#ccc 50%,#000) (Difficulty ⭐⭐)
3-color gradient with a custom middle-color position — precise control over the color transition point.
Shorthand:
lg(#fff,#ccc 50%,#000)
Expansion:
background: -webkit-linear-gradient(top, #fff 0%, #ccc 50%, #000 100%);
background: -moz-linear-gradient(top, #fff 0%, #ccc 50%, #000 100%);
background: -o-linear-gradient(top, #fff 0%, #ccc 50%, #000 100%);
background: linear-gradient(to bottom, #fff 0%, #ccc 50%, #000 100%);
Output:
TEXT 📖 Display onlyExplanation: In the 3-color gradient `#fff,#ccc 50%,#000`, `#fff` is the start color (auto 0%), `#ccc 50%` is the middle color (**explicitly placed at 50%**), and `#000` is the end color (auto 100%). The `50%` after `#ccc` is a **position parameter** — controlling where `#ccc` sits in the gradient. The position parameter and color are separated by a **space** (not `-`), because `-` is already a value separator in Emmet CSS shorthand. After expansion, the browser renders a three-segment gradient: pure white at 0% top, light gray at 50% middle, pure black at 100% bottom. Color-stop positions are the core tool for designers fine-tuning gradient effects — for example, "abrupt color change in the middle on button press" requires explicit positions.
▶ Example: Radial Gradient rg(#fff,#000) (Difficulty ⭐)
Radial gradient — a circular gradient from center outward, ideal for spotlight and highlight effects.
Shorthand:
rg(#fff,#000)
Expansion:
background: -webkit-radial-gradient(center, #fff 0%, #000 100%);
background: -moz-radial-gradient(center, #fff 0%, #000 100%);
background: -o-radial-gradient(center, #fff 0%, #000 100%);
background: radial-gradient(circle at center, #fff 0%, #000 100%);
Output:
TEXT 📖 Display onlyExplanation: `rg(...)` is the shorthand keyword for `radial-gradient(...)`, with a structure similar to `lg(...)` but **defaulting to center-outward** gradient. `#fff` and `#000` are two color stops. Emmet expands to 4 cross-browser lines: ① `-webkit-radial-gradient(center, ...)` (legacy webkit); ② `-moz-radial-gradient`; ③ `-o-radial-gradient`; ④ standard `radial-gradient(circle at center, ...)` (using `circle at center` to indicate a circular radial at center). Radial gradients are commonly used for spotlight, highlight, and shadow-replacement effects — such as a "light spot" on card hover or a "vignette" border on images.
▶ Example: Complete Button Style Hands-On (Difficulty ⭐⭐)
A comprehensive hands-on exercise — combining all CSS shorthand mechanisms from lessons 11–13 (unit inference, colors, !, fuzzy matching) to write a complete button style.
Shorthand:
bgc#2c3e50+c#fff+p10-20+bdrs4+tdn+fz16+fw700
Expansion:
background-color: #2c3e50;
color: #ffffff;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
font-size: 16px;
font-weight: 700;
Output:
TEXT 📖 Display onlyExplanation: 7 independent shorthands written in one line, covering a button's complete style — `bgc#2c3e50` for dark blue-gray background (`#2c3e50` is a 6-digit hex preserved as-is); `c#fff` for white text (`#fff` auto-expands to `#ffffff`); `p10-20` for 10px top/bottom and 20px left/right padding; `bdrs4` for 4px border-radius; `tdn` fuzzy-matched to `text-decoration: none` (removes underline); `fz16` for 16px font-size (`fz` is font-size shorthand); `fw700` for font-weight 700 (`fw` is font-weight shorthand, 700 is bold). The entire shorthand is 47 characters, expanding to 7 full CSS lines. From hand-writing 7 lines × ~18 chars average = 126 characters + 7 Tab presses + 7 semicolon checks, down to 47 characters in one line. Emmet CSS shorthand reduces keystroke count by 60%, and combined with the gradient shorthand's 4 cross-browser lines, overall efficiency improves 70–80x.
7. Complete Example: Gradient Button + Hover Effect
Combine the gradient generator, CSS shorthand, and fuzzy matching — a complete "gradient button + hover effect".
▶ Example: Complete Gradient Button Style (Difficulty ⭐⭐⭐)
Shorthand:
.bg:lg(left,#fff,#f0f0f0) c#333 p10-20 bdrs4 tdn fz16 fw700 curp
Expansion:
background: -webkit-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: -moz-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: -o-linear-gradient(left, #fff 0%, #f0f0f0 100%);
background: linear-gradient(to right, #fff 0%, #f0f0f0 100%);
color: #333333;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
font-size: 16px;
font-weight: 700;
cursor: pointer;
Output:
TEXT 📖 Display onlyExplanation: This example is the grand finale of Phase 4 — simultaneously invoking the gradient generator (`lg(left,#fff,#f0f0f0)` expanding to 4 cross-browser lines), unit inference (`p10-20` auto-adds px, `bdrs4` auto-adds px), color auto-expansion (`c#333` 3-digit → 6-digit), fuzzy matching (`tdn` → text-decoration: none), and single-letter property shorthands (`fz` for font-size, `fw` for font-weight, `curp` for cursor: pointer). A single 60-character shorthand expands to 11 full CSS lines (4 gradient lines + 7 base style lines). This "gradient button" is the most common UI component on SaaS landing pages and product websites — compressing its styles into a single Emmet shorthand is Emmet's ultimate form in the CSS realm. The entire shorthand reduces hand-writing from 11 lines × ~22 average characters = 242 characters + 11 Tab presses + 11 semicolon checks to 60 characters in one line. Combined with lesson 12's vendor prefix mechanism (`-bdrs4`), you could add 2 more webkit/moz border-radius lines — but modern browsers all support `border-radius` natively, so it's typically omitted in practice.
❓ FAQ
lg(...) only expand to 4 cross-browser lines? Can I reduce it to 2?lg(...)? Can the direction be omitted?top (top to bottom). lg(#fff,#000) with no direction expands to linear-gradient(top, ...) (legacy) or linear-gradient(to bottom, ...) (standard) — both are top-to-bottom. For other directions, you must write them explicitly: lg(left,...), lg(right,...), lg(bottom,...).bg+ character shorthand mean? How is it different from bgc?bg+ is Emmet's background expansion shorthand — + means "with default placeholder value", expanding to the background shorthand with a url() placeholder (suited for image background scenarios). bgc is just background-color, handling only background color. bg+ and bgi (background-image) are more commonly used with lg(...) gradients: bgi:lg(left,#fff,#000) expands to a complete gradient background image. In practice, using bg + lg(...) is recommended.transparent in gradient shorthands?lg(#fff,transparent,#000) expands to a 3-color gradient starting with #fff, transparent in the middle, ending with #000. transparent is a standard CSS keyword — Emmet outputs it as-is. If you want rgba transparency, you can use the rgba() function: lg(rgba(255,255,255,0),#000), but Emmet's support for function calls inside rgba() is limited. It's recommended to use hex colors (e.g., #fff0) or #fff00 (4-digit color, last two digits are alpha).📖 Summary
lg(...)linear gradient shorthand: auto-expands to 4 cross-browser lines (webkit + moz + o + standard W3C proposal version)rg(...)radial gradient shorthand: same structure aslg(...), defaults to center-outward (circlecircle at center)- Gradient direction:
left/right/top/bottomas the first parameter; legacy uses starting direction, standard auto-addstoprefix with mirrored direction - Multi-color stops:
color + space + position%for precise control (#ccc 50%means#cccat the 50% position) - Complete button style: 7 properties in one line (
bgc+c+p+bdrs+tdn+fz+fw), covering background/text/spacing/border-radius/decoration/font-size/font-weight - Hands-on: gradient button + hover effect in a single Emmet shorthand, generating 11 lines of CSS
📝 Exercises
-
Basic (Difficulty ⭐): In a
.cssfile, enter three gradient shorthands:lg(#fff,#000),lg(#fc0,red), andrg(#fff,#000). Press Tab and record the expansion results (each should expand to 4 cross-browser lines). Count the total expanded lines and verify each line has the correct browser prefix (webkit/moz/o + standard). -
Intermediate (Difficulty ⭐⭐): Write a button style with a gradient background using a single Emmet shorthand line (at least 8 properties). Requirements: (a) gradient background using
bg:lg(left,#fff,#f0f0f0)orbgi:lg(top,#3b82f6,#1e40af)(blue gradient); (b) white textc#fff; (c) padding 10-20; (d) border-radius 6px; (e) text-decoration: none; (f) font-size 16px; (g) font-weight 600; (h) cursor pointercurp(curpis shorthand for cursor: pointer). Verify the expansion and explain why the 8 properties are separated by spaces (not hyphens). -
Challenge (Difficulty ⭐⭐⭐): Write a complete "card + gradient + hover transition" CSS style (at least 10 properties). Requirements: (a) gradient background (
bg:lg4 cross-browser lines); (b) border-radius 8px; (c) shadow (bxsfuzzy match); (d) padding 16-20; (e) dark gray text; (f) font-size 14px; (g)transitionusing single-letter shorthand (trsor-trs); (h)cursor: pointer; (i) at least 1 property using fuzzy matching; (j) at least 1 property ending with!important. Write everything in one Emmet shorthand line, record the expansion result (expected 15-20 lines of CSS), and write a speed comparison report: "gradient + CSS shorthand hands-on" vs. hand-writing CSS.
