docs: Add Gradients docs (#1116)

* docs: Add Gradients docs

* chore: Fmt

* chore: Clean up

* fix

Author: marc2332

crates/elements/src/_docs/color_syntax.rs

@@ -22,6 +22,17 @@
 //! - With HSL and alpha: `hsl(28deg, 80%, 50%, 25%)`
 //! - With Hex: `#E93323`
 //!
+//! #### Gradients
+//!
+//! Syntax is `<type>-gradient(<angle>, ...[<color> <offset>],)`
+//!
+//! And supported types are `linear`/`radial`/`conic`
+//!
+//! Examples:
+//! - Linear: `linear-gradient(250deg, orange 15%, rgb(255, 0, 0) 50%, rgb(255, 192, 203) 80%)`
+//! - Radial: `radial-gradient(orange 15%, rgb(255, 0, 0) 50%, rgb(255, 192, 203) 80%)`
+//! - Conic: `conic-gradient(250deg, orange 15%, rgb(255, 0, 0) 50%, rgb(255, 192, 203) 80%)`
+//!
 //! #### SVG
 //!
 //! For the `svg` element you can also use:

examples/gradient.rs

@@ -33,6 +33,8 @@ fn app() -> Element {
     rsx!(rect {
         height: "100%",
         width: "100%",
+        spacing: "8",
+        padding: "8",
         background,
         Button {
             onpress: move |_| gradient.set(GradientExample::Linear),