Add Background.blur

src/Element/Background.elm

@@ -1,6 +1,7 @@
 module Element.Background exposing
     ( color, gradient
     , image, uncropped, tiled, tiledX, tiledY
+    , blur
     )
 
 {-|
@@ -14,6 +15,10 @@ module Element.Background exposing
 
 **Note** if you want more control over a background image than is provided here, you should try just using a normal `Element.image` with something like `Element.behindContent`.
 
+# Effects
+
+@docs blur
+
 -}
 
 import Element exposing (Attr, Attribute, Color)
@@ -126,6 +131,16 @@ gradient { angle, steps } =
                     "background-image"
                     ("linear-gradient(" ++ (String.join ", " <| (String.fromFloat angle ++ "rad") :: List.map Internal.formatColor steps) ++ ")")
 
+{-| Creates a blurred background effect.
+
+-}
+blur : Float -> Attribute msg
+blur radius =
+    Internal.BatchAttr
+        [ VirtualDom.style "-webkit-backdrop-filter" ("blur(" ++ String.fromFloat radius ++ "px)")
+        , VirtualDom.style "backdrop-filter" ("blur(" ++ String.fromFloat radius ++ "px)")
+        ]
+
 
 
 -- {-| -}

src/Internal/Model.elm

@@ -302,6 +302,7 @@ type alias Angle =
 type Attribute aligned msg
     = NoAttribute
     | Attr (VirtualDom.Attribute msg)
+    | BatchAttr (List (VirtualDom.Attribute msg))
     | Describe Description
       -- invalidation key and literal class
     | Class Flag String
@@ -934,6 +935,9 @@ gatherAttrRecursive classes node has transform styles attrs children elementAttr
                 Attr actualAttribute ->
                     gatherAttrRecursive classes node has transform styles (actualAttribute :: attrs) children remaining
 
+                BatchAttr actualAttributes ->
+                    gatherAttrRecursive classes node has transform styles (actualAttributes ++ attrs) children remaining
+
                 StyleClass flag style ->
                     if Flag.present flag has then
                         gatherAttrRecursive classes node has transform styles attrs children remaining
@@ -1859,6 +1863,9 @@ filter attrs =
                     Attr attr ->
                         ( x :: found, has )
 
+                    BatchAttr domAttrs ->
+                        ( x :: found, has )
+
                     StyleClass _ style ->
                         ( x :: found, has )
 
@@ -3376,6 +3383,9 @@ mapAttr fn attr =
         Attr htmlAttr ->
             Attr (VirtualDom.mapAttribute fn htmlAttr)
 
+        BatchAttr htmlAttrs ->
+            BatchAttr (List.map (VirtualDom.mapAttribute fn) htmlAttrs)
+
         TransformComponent fl trans ->
             TransformComponent fl trans
 
@@ -3414,6 +3424,9 @@ mapAttrFromStyle fn attr =
         Attr htmlAttr ->
             Attr (VirtualDom.mapAttribute fn htmlAttr)
 
+        BatchAttr htmlAttrs ->
+            BatchAttr (List.map (VirtualDom.mapAttribute fn) htmlAttrs)
+
         TransformComponent fl trans ->
             TransformComponent fl trans