diff options
Diffstat (limited to 'site/content/docs/5.0/utilities/colors.md')
| -rw-r--r-- | site/content/docs/5.0/utilities/colors.md | 6 |
1 files changed, 4 insertions, 2 deletions
diff --git a/site/content/docs/5.0/utilities/colors.md b/site/content/docs/5.0/utilities/colors.md index cef79ab662..86f4741466 100644 --- a/site/content/docs/5.0/utilities/colors.md +++ b/site/content/docs/5.0/utilities/colors.md @@ -39,12 +39,14 @@ Similar to the contextual text color classes, easily set the background of an el ## Background gradient -When `$enable-gradients` is set to `true` (default is `false`), you can use `.bg-gradient-` utility classes. [Learn about our Sass options]({{< docsref "/customize/sass" >}}) to enable these classes and more. +By adding a `.bg-gradient` class, a linear gradient is added as background image to the backgrounds. This gradient starts with a semi-transparent white which fades out to the bottom. + +Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-gradient);`. {{< markdown >}} {{< colors.inline >}} {{- range (index $.Site.Data "theme-colors") }} -- `.bg-gradient-{{ .name }}` +<div class="p-3 mb-2 bg-{{ .name }} bg-gradient {{ if or (eq .name "light") (eq .name "warning") }}text-dark{{ else }}text-white{{ end }}">.bg-{{ .name }}.bg-gradient</div> {{- end -}} {{< /colors.inline >}} {{< /markdown >}} |