Emmet: CSS Gradients in One Line

Q: What is the default gradient direction for lg(...) ? Can the direction be omitted?

The default is 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,...) .

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

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) and lg(top, #fff, #000)
Multi-color stops with positions: lg(#fff, #ccc 50%, #000) — the 50% is the position of #ccc
rg(...) radial gradient: same structure as lg(...), 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:

CSS

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:

CSS

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:

TEXT 📖 参照専用

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

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

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

💡 Tip: Emmet's gradient shorthands are used as CSS property values — typically inside 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

📌 Key Point: Legacy webkit/moz/o versions use the starting direction (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

💡 Tip: Color-stop position parameters are optional — when omitted, the browser distributes them evenly. But precise control (like "abrupt color change at 30%") requires explicit positions. Use a space (not a hyphen) between the color and its position, since hyphens are parsed as value separators by Emmet.

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

⚠️ Note: Complex radial gradient parameters (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:

CSS

lg(#fff,#000)

Expansion:

CSS

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 📖 参照専用

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

▶ Example: Gradient Direction `lg(left,#fff,#000)` (Difficulty ⭐⭐)

Horizontal gradient — left to right, verifying the bidirectional conversion of the direction parameter.

Shorthand:

CSS

lg(left,#fff,#000)

Expansion:

CSS

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 📖 参照専用

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

▶ 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:

CSS

lg(#fff,#ccc 50%,#000)

Expansion:

CSS

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 📖 参照専用

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

▶ Example: Radial Gradient `rg(#fff,#000)` (Difficulty ⭐)

Radial gradient — a circular gradient from center outward, ideal for spotlight and highlight effects.

Shorthand:

CSS

rg(#fff,#000)

Expansion:

CSS

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 📖 参照専用

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

▶ 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:

CSS

bgc#2c3e50+c#fff+p10-20+bdrs4+tdn+fz16+fw700

Expansion:

CSS

background-color: #2c3e50;
color: #ffffff;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
font-size: 16px;
font-weight: 700;

Output:
TEXT 📖 参照専用

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

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:

CSS

.bg:lg(left,#fff,#f0f0f0) c#333 p10-20 bdrs4 tdn fz16 fw700 curp

Expansion:

CSS

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 📖 参照専用

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

❓ よくある質問

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

Q What is the default gradient direction for lg(...)? Can the direction be omitted?

A The default is 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,...).

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

📖 まとめ

lg(...) linear gradient shorthand: auto-expands to 4 cross-browser lines (webkit + moz + o + standard W3C proposal version)
rg(...) radial gradient shorthand: same structure as lg(...), defaults to center-outward (circle circle at center)
Gradient direction: left / right / top / bottom as the first parameter; legacy uses starting direction, standard auto-adds to prefix with mirrored direction
Multi-color stops: color + space + position% for precise control (#ccc 50% means #ccc at 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

📝 練習問題

Basic (Difficulty ⭐): In a .css file, enter three gradient shorthands: lg(#fff,#000), lg(#fc0,red), and rg(#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).

QUERY LENGTH LIMIT EXCEEDED. MAX ALLOWED QUERY : 500 CHARS

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて

Emmet: CSS Gradients in One Line

1. What You'll Learn

2. A Frontend Developer's Real Story

(1) Pain Point: Cross-Browser Gradient Code + Button Styles — A Soul-Crushing Experience

(2) The Emmet Gradient Generator Solution

(3) Benefits

3. Core Definition of CSS3 Gradient Generators

4. Linear Gradient lg(...): Direction + Color Stops

(1) Basic Linear Gradient: Default Direction

(2) Gradient Direction Parameter

(3) Multi-Color Stops with Position Parameters

5. Radial Gradient rg(...): From Center Outward

(1) Basic Radial Gradient

(2) Radial Gradient Shape and Position

6. Hands-On Examples

▶ Example: Basic Linear Gradient lg(#fff,#000) (Difficulty ⭐)

▶ Example: Gradient Direction lg(left,#fff,#000) (Difficulty ⭐⭐)

▶ Example: Multi-Color Stops lg(#fff,#ccc 50%,#000) (Difficulty ⭐⭐)

▶ Example: Radial Gradient rg(#fff,#000) (Difficulty ⭐)

▶ Example: Complete Button Style Hands-On (Difficulty ⭐⭐)

7. Complete Example: Gradient Button + Hover Effect

▶ Example: Complete Gradient Button Style (Difficulty ⭐⭐⭐)

❓ よくある質問

📖 まとめ

📝 練習問題

4. Linear Gradient `lg(...)`: Direction + Color Stops

5. Radial Gradient `rg(...)`: From Center Outward

▶ Example: Basic Linear Gradient `lg(#fff,#000)` (Difficulty ⭐)

▶ Example: Gradient Direction `lg(left,#fff,#000)` (Difficulty ⭐⭐)

▶ Example: Multi-Color Stops `lg(#fff,#ccc 50%,#000)` (Difficulty ⭐⭐)

▶ Example: Radial Gradient `rg(#fff,#000)` (Difficulty ⭐)