Merge pull request #1367 from quarto-dev/revealjs/gradient-background

Author: cderv

docs/presentations/revealjs/examples/background-gradient.qmd

@@ -0,0 +1,7 @@
+---
+format: revealjs
+---
+
+## Slide with linear-gradient {background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)"}
+
+## Slide with radial-gradient {background-gradient="radial-gradient(#283b95, #17b2c3)"}

docs/presentations/revealjs/index.qmd

@@ -337,20 +337,32 @@ Note that one significant disadvantage to tabsets is that only the first tab wil
 
 ## Slide Backgrounds
 
-Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page backgrounds outside of the slide area by adding a `background` attribute to your slide headers. Four different types of backgrounds are supported: color, image, video and iframe.
+Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page backgrounds outside of the slide area by adding a `background` attribute to your slide headers. Five different types of backgrounds are supported: color, gradient, image, video and iframe.
+
+### Color Background
 
 All CSS color formats are supported, including hex values, keywords, `rgba()` or `hsl()`. For example:
 
 ``` {.markdown code-preview="examples/background-color.qmd"}
 ## Slide Title {background-color="aquamarine"}
 ```
 
-You can also use various types of media (image, video, or iframe) as your slide background. These options are described below.
-
 ::: {.callout-tip appearance="simple"}
 Note that if the background color of your media differs from your presentation's theme (e.g. a dark image when using a light theme) then you should also explicitly set the `background-color` so that text on top of the background appears in the correct color (e.g. light text on a dark background).
 :::
 
+### Gradient Background
+
+{{< include /docs/prerelease/1.6/_pre-release-feature.qmd >}}
+
+All CSS gradient formats are supported, including `linear-gradient`, `radial-gradient` and `conic-gradient`.
+
+```{.markdown code-preview="examples/background-gradient.qmd"}
+## Slide Title {background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)"}
+
+## Slide Title {background-gradient="radial-gradient(#283b95, #17b2c3)"}
+```
+
 ### Image Backgrounds
 
 By default, background images are resized to cover the full page. Available options: