Home›Docs›Basic›Gradient Background

Gradient Background

Last updated: 17 days ago

Category: Basic

Gradients are typically used for section backgrounds. For standard web pages, it's best not to use too many colors, so OrcaUI's gradient system only employs two-color gradients. It supports gradients ...

Background17 days agoGradient Background17 days agoColor17 days ago

Basic Usage

Apply the _gd class to any element to create a primary color gradient background with a 45-degree counter-clockwise angle.

Output
HTML

- _gd
```
                
                
            
```

Color Themes

In addition to the default primary gradient, other theme color gradients are available including: _gd-prim, _gd-error, _gd-succ, _gd-info, _gd-warn, _gd-issue, _gd-text.

Output
HTML

- _gd-prim
- _gd-error
- _gd-succ
- _gd-info
- _gd-warn
- _gd-issue
- _gd-text
```
                
                
            
```

Gradient Angles

The default gradient angle is 45° counter-clockwise. Use _gd-[0~360] to define gradient angles within the same color scheme. Supported angles:

Class Name	Angle	Description
`_gd-0`	0°	Vertical from bottom to top
`_gd-45`	45°	Diagonal bottom-left to top-right
`_gd-90`	90°	Horizontal from left to right
`_gd-135`	135°	Diagonal top-left to bottom-right
`_gd-180`	180°	Vertical flip (top to bottom)
`_gd-225`	225°	Diagonal top-right to bottom-left
`_gd-270`	270°	Horizontal flip (right to left)
`_gd-315`	315°	Diagonal bottom-right to top-left
`_gd-360`	360°	Same as 0° (full rotation)

Output
HTML

- _gd-0
- _gd-45
- _gd-90
- _gd-135
- _gd-180
- _gd-225
- _gd-270
- _gd-315
- _gd-360
```
                
                
            
```

The framework provides a set of gradient classes:

Class Name	Description	Example
`_gd`	Primary color gradient	`<div class="_gd"></div>`
`_gd-[0~360]`	Gradient angle	-
`_gd-prim`	Primary theme gradient	-
`_gd-error`	Error theme gradient	-
`_gd-succ`	Success theme gradient	-
`_gd-info`	Info theme gradient	-
`_gd-warn`	Warning theme gradient	-
`_gd-issue`	Issue theme gradient	-
`_gd-text`	Text theme gradient	-

Gradient angles can be combined with theme colors.

Default Color

Same appearance as primary color.

Output
HTML

- _gd
- _gd-0
- _gd-45
- _gd-90
- _gd-135
- _gd-180
- _gd-225
- _gd-270
- _gd-315
- _gd-360
```
                
                
            
```

Primary Color

Output
HTML

- _gd-prim
- _gd-prim _gd-0
- _gd-prim _gd-45
- _gd-prim _gd-90
- _gd-prim _gd-135
- _gd-prim _gd-180
- _gd-prim _gd-225
- _gd-prim _gd-270
- _gd-prim _gd-315
- _gd-prim _gd-360
```
                
                
            
```

Error Color

Output
HTML

- _gd-error
- _gd-error _gd-0
- _gd-error _gd-45
- _gd-error _gd-90
- _gd-error _gd-135
- _gd-error _gd-180
- _gd-error _gd-225
- _gd-error _gd-270
- _gd-error _gd-315
- _gd-error _gd-360
```
                
                
            
```

Success Color

Output
HTML

- _gd-succ
- _gd-succ _gd-0
- _gd-succ _gd-45
- _gd-succ _gd-90
- _gd-succ _gd-135
- _gd-succ _gd-180
- _gd-succ _gd-225
- _gd-succ _gd-270
- _gd-succ _gd-315
- _gd-succ _gd-360
```
                
                
            
```

Info Color

Output
HTML

- _gd-info
- _gd-info _gd-0
- _gd-info _gd-45
- _gd-info _gd-90
- _gd-info _gd-135
- _gd-info _gd-180
- _gd-info _gd-225
- _gd-info _gd-270
- _gd-info _gd-315
- _gd-info _gd-360
```
                
                
            
```

Warning Color

Output
HTML

- _gd-warn
- _gd-warn _gd-0
- _gd-warn _gd-45
- _gd-warn _gd-90
- _gd-warn _gd-135
- _gd-warn _gd-180
- _gd-warn _gd-225
- _gd-warn _gd-270
- _gd-warn _gd-315
- _gd-warn _gd-360
```
                
                
            
```

Issue Color

Output
HTML

- _gd-issue
- _gd-issue _gd-0
- _gd-issue _gd-45
- _gd-issue _gd-90
- _gd-issue _gd-135
- _gd-issue _gd-180
- _gd-issue _gd-225
- _gd-issue _gd-270
- _gd-issue _gd-315
- _gd-issue _gd-360
```
                
                
            
```

Text Color

Output
HTML

- _gd-text
- _gd-text _gd-0
- _gd-text _gd-45
- _gd-text _gd-90
- _gd-text _gd-135
- _gd-text _gd-180
- _gd-text _gd-225
- _gd-text _gd-270
- _gd-text _gd-315
- _gd-text _gd-360
```
                
                
            
```