Skip to content

Commit 9c78cf6

Browse files
Bartosz-DoBartosz-Do
authored
Fix .bg-gradient conflict and add gradient documentation pages (#2681)
1 parent b1d49e9 commit 9c78cf6

4 files changed

Lines changed: 311 additions & 7 deletions

File tree

‎.changeset/fix-gradient-utilities-docs.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@tabler/core": patch
3+
"@tabler/docs": patch
4+
---
5+
6+
Fixed `.bg-gradient` utility conflicts to restore `from`/`via`/`to` gradient rendering and updated gradient documentation examples to match available classes.

‎core/scss/_utilities.scss‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -794,13 +794,6 @@ $utilities: map.merge(
794794
class: bg,
795795
values: $utilities-bg-subtle,
796796
),
797-
'gradient': (
798-
property: background-image,
799-
class: bg,
800-
values: (
801-
gradient: var(--#{$prefix}gradient),
802-
),
803-
),
804797
'user-select': (
805798
property: user-select,
806799
values: all auto none,

‎docs/content/ui/components/card-gradient.md‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
---
2+
title: Card gradient
3+
summary: Card gradients add rich color backgrounds to cards and help emphasize key information in dashboards and marketing sections.
4+
description: Build eye-catching cards with gradient variants, directions, and animated backgrounds.
5+
---
6+
7+
{% assign gradients = "rainbow,sun,snow,ocean,mellow,disco,psychedelic,love,gold" | split: "," %}
8+
9+
## Default markup
10+
11+
Use the `.card-gradient` class on a `.card` element to apply the default gradient treatment.
12+
13+
```html
14+
<div class="card card-gradient">...</div>
15+
```
16+
17+
The example below shows the base gradient card style.
18+
19+
{% capture html -%}
20+
<div class="card card-gradient">
21+
<div class="card-body">
22+
<h3 class="card-title">Total Revenue</h3>
23+
<p class="text-secondary mb-0">Track key metrics in a highlighted card.</p>
24+
</div>
25+
</div>
26+
{%- endcapture %}
27+
{% include "docs/example.html" html=html bg="surface-secondary" column %}
28+
29+
## Color variants
30+
31+
You can change the color of card gradient by adding a color class like `.card-gradient-primary` or `.card-gradient-success` to the `.card-gradient` element. You can choose any color from [full list of available colors](/ui/base/colors).
32+
33+
{% capture html -%}
34+
<div class="card card-gradient card-gradient-primary">
35+
<div class="card-body">
36+
<h3 class="card-title">Primary</h3>
37+
</div>
38+
</div>
39+
<div class="card card-gradient card-gradient-success">
40+
<div class="card-body">
41+
<h3 class="card-title">Success</h3>
42+
</div>
43+
</div>
44+
<div class="card card-gradient card-gradient-danger">
45+
<div class="card-body">
46+
<h3 class="card-title">Danger</h3>
47+
</div>
48+
</div>
49+
<div class="card card-gradient card-gradient-blue">
50+
<div class="card-body">
51+
<h3 class="card-title">Blue</h3>
52+
</div>
53+
</div>
54+
{%- endcapture %}
55+
{% include "docs/example.html" html=html bg="surface-secondary" column %}
56+
57+
## Named gradients
58+
59+
In addition to color-based variants, card gradients include predefined multi-color themes.
60+
61+
Here is a list of classes:
62+
{% for gradient in gradients %}
63+
- `.card-gradient-{{ gradient }}`
64+
{% endfor %}
65+
66+
{% capture html -%}
67+
{% for gradient in gradients %}
68+
<div class="card card-gradient card-gradient-{{ gradient }}">
69+
<div class="card-body">
70+
<h3 class="card-title">{{ gradient | capitalize }}</h3>
71+
</div>
72+
</div>
73+
{% endfor %}
74+
{%- endcapture %}
75+
{% include "docs/example.html" html=html bg="surface-secondary" column %}
76+
77+
## Direction modifiers
78+
79+
Use direction modifiers to control where the gradient flow starts.
80+
81+
```html
82+
<div class="card card-gradient card-gradient-start">...</div>
83+
<div class="card card-gradient card-gradient-end">...</div>
84+
<div class="card card-gradient card-gradient-bottom">...</div>
85+
```
86+
87+
{% capture html -%}
88+
<div class="card card-gradient card-gradient-start card-gradient-purple">
89+
<div class="card-body">
90+
<h3 class="card-title">Start</h3>
91+
</div>
92+
</div>
93+
94+
<div class="card card-gradient card-gradient-end card-gradient-purple">
95+
<div class="card-body">
96+
<h3 class="card-title">End</h3>
97+
</div>
98+
</div>
99+
100+
<div class="card card-gradient card-gradient-bottom card-gradient-purple">
101+
<div class="card-body">
102+
<h3 class="card-title">Bottom</h3>
103+
</div>
104+
</div>
105+
{%- endcapture %}
106+
{% include "docs/example.html" html=html bg="surface-secondary" column %}
107+
108+
## Animated gradient
109+
110+
Add `.card-gradient-animated` to animate gradient direction over time.
111+
112+
{% capture html -%}
113+
<div class="card card-gradient card-gradient-rainbow card-gradient-animated">
114+
<div class="card-body">
115+
<h3 class="card-title">Animated gradient</h3>
116+
<p class="text-secondary mb-0">Use this variant for visual emphasis on highlight cards.</p>
117+
</div>
118+
</div>
119+
120+
<div class="card card-gradient card-gradient-sun card-gradient-animated">
121+
<div class="card-body">
122+
<h3 class="card-title">Animated gradient</h3>
123+
<p class="text-secondary mb-0">Use this variant for visual emphasis on highlight cards.</p>
124+
</div>
125+
</div>
126+
{%- endcapture %}
127+
{% include "docs/example.html" html=html bg="surface-secondary" column %}
128+
129+
## Accessibility
130+
131+
- Keep text contrast readable on all gradient variants.
132+
- Prefer short content blocks on high-saturation gradients.
133+
- Avoid using animated gradients on too many cards in one view.

‎docs/content/ui/utilities/gradients.md‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
---
2+
title: Gradients
3+
summary: Use gradient utilities to build directional color backgrounds with from, via, and to color stops.
4+
description: Create directional gradients with utility classes.
5+
---
6+
7+
{% assign colors = '' | split: '' %}
8+
{% for color in site.colors %}
9+
{% assign colors = colors | push: color[0] %}
10+
{% endfor %}
11+
{% assign colors = colors | push: 'white' %}
12+
{% assign colors = colors | push: 'transparent' %}
13+
14+
## Default gradient
15+
16+
Use `.bg-gradient` to enable gradient background rendering on an element.
17+
Then combine it with color stop utilities to define the final look.
18+
19+
```html
20+
<div class="bg-gradient bg-gradient-from-primary bg-gradient-to-transparent"></div>
21+
```
22+
23+
{% capture html -%}
24+
<div class="border rounded bg-gradient bg-gradient-from-primary bg-gradient-to-transparent p-5"></div>
25+
{%- endcapture %}
26+
{% include "docs/example.html" html=html bg="pattern-rectangles" column %}
27+
28+
## Gradient directions
29+
30+
Use direction utilities to control gradient flow:
31+
32+
- `.bg-gradient-to-t`
33+
- `.bg-gradient-to-te`
34+
- `.bg-gradient-to-e`
35+
- `.bg-gradient-to-be`
36+
- `.bg-gradient-to-b`
37+
- `.bg-gradient-to-bs`
38+
- `.bg-gradient-to-s`
39+
- `.bg-gradient-to-ts`
40+
41+
{% capture html -%}
42+
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
43+
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-t p-4"></div><code>.bg-gradient-to-t</code></div>
44+
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-te p-4"></div><code>.bg-gradient-to-te</code></div>
45+
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-e p-4"></div><code>.bg-gradient-to-e</code></div>
46+
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-be p-4"></div><code>.bg-gradient-to-be</code></div>
47+
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-b p-4"></div><code>.bg-gradient-to-b</code></div>
48+
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-bs p-4"></div><code>.bg-gradient-to-bs</code></div>
49+
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-s p-4"></div><code>.bg-gradient-to-s</code></div>
50+
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-ts p-4"></div><code>.bg-gradient-to-ts</code></div>
51+
</div>
52+
{%- endcapture %}
53+
{% include "docs/example.html" html=html bg="surface-primary" hide-code %}
54+
55+
```html
56+
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-t">
57+
...
58+
</div>
59+
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-te">
60+
...
61+
</div>
62+
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-e">
63+
...
64+
</div>
65+
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-be">
66+
...
67+
</div>
68+
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-b">
69+
...
70+
</div>
71+
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-bs">
72+
...
73+
</div>
74+
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-s">
75+
...
76+
</div>
77+
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-ts">
78+
...
79+
</div>
80+
```
81+
82+
83+
## Gradient color stops
84+
85+
Use color stop utilities to control where a gradient starts, transitions, and ends. You can choose any color from [full list of available colors](/ui/base/colors).
86+
87+
Here is a list of classes:
88+
- `.bg-gradient-from-{color}`
89+
- `.bg-gradient-via-{color}` (optional middle stop for smoother blending)
90+
- `.bg-gradient-to-{color}`
91+
92+
{% capture html -%}
93+
<div class="row row-cols-1 row-cols-lg-2 g-3">
94+
<div class="col">
95+
<div class="border rounded bg-gradient bg-gradient-from-purple bg-gradient-to-transparent p-5"></div>
96+
<code>.bg-gradient-from-purple .bg-gradient-to-transparent</code>
97+
</div>
98+
<div class="col">
99+
<div class="border rounded bg-gradient bg-gradient-from-pink bg-gradient-via-orange bg-gradient-to-yellow p-5"></div>
100+
<code>.bg-gradient-from-pink .bg-gradient-via-orange .bg-gradient-to-yellow</code>
101+
</div>
102+
</div>
103+
{%- endcapture %}
104+
{% include "docs/example.html" html=html bg="pattern-rectangles" hide-code %}
105+
106+
```html
107+
<div class="bg-gradient bg-gradient-from-purple bg-gradient-to-transparent">
108+
...
109+
</div>
110+
111+
<div class="bg-gradient bg-gradient-from-pink bg-gradient-via-orange bg-gradient-to-yellow">
112+
...
113+
</div>
114+
```
115+
116+
## Available colors
117+
118+
You can use any project color token with `from`, `via`, and `to` utilities.
119+
See the [full list of available colors](/ui/base/colors) for all color names.
120+
121+
{% capture html -%}
122+
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
123+
{% for color in colors %}
124+
<div class="col">
125+
<div class="border rounded bg-gradient bg-gradient-from-{{ color }} bg-gradient-to-transparent mb-2 p-4"></div>
126+
<code>.bg-gradient-from-{{ color }}</code>
127+
</div>
128+
{% endfor %}
129+
</div>
130+
{%- endcapture %}
131+
{% include "docs/example.html" html=html bg="surface-primary" hide-code %}
132+
133+
```html
134+
{% for color in colors %}
135+
<div class="bg-gradient bg-gradient-from-{{ color }} bg-gradient-to-transparent">
136+
...
137+
</div>
138+
{% endfor %}
139+
```
140+
141+
## Examples
142+
143+
### Card header gradient
144+
145+
Use gradient utilities on card sections to highlight key content areas.
146+
147+
{% capture html -%}
148+
<div class="card">
149+
<div class="card-body bg-gradient bg-gradient-from-indigo bg-gradient-to-transparent rounded-top">
150+
<h3 class="card-title mb-1">Performance</h3>
151+
<p class="text-secondary mb-0">Weekly trend overview</p>
152+
</div>
153+
154+
<div class="card-body">
155+
<p class="mb-0">Card content</p>
156+
</div>
157+
</div>
158+
{%- endcapture %}
159+
{% include "docs/example.html" html=html bg="surface-secondary" column %}
160+
161+
### Badge-like highlight
162+
163+
Use short gradients on compact UI elements for subtle emphasis.
164+
165+
{% capture html -%}
166+
<div class="d-flex gap-2 flex-wrap">
167+
<span class="badge bg-gradient bg-gradient-from-green bg-gradient-to-teal">Success trend</span>
168+
<span class="badge bg-gradient bg-gradient-from-orange bg-gradient-to-red">Warning trend</span>
169+
<span class="badge bg-gradient bg-gradient-from-blue bg-gradient-to-purple">New feature</span>
170+
</div>
171+
{%- endcapture %}
172+
{% include "docs/example.html" html=html bg="surface-secondary" centered %}

0 commit comments

Comments
 (0)