--- title: "Gradient Backgrounds - Free Elements Set - 60 customizable PNGs, SVGs, PDFs" product: "Streamline Icons, Illustrations and Elements" asset_count: 60 url: /elements/background-gradients canonical_url: "https://www.streamlinehq.com/elements/background-gradients" summary: "Gradient Backgrounds uses smooth gradient fields." --- # Gradient Backgrounds - Free Gradient Backgrounds uses smooth gradient fields. 60 elements License: Free ## Fit & Recommendation ### Primary use cases - Place a surface behind a presentation cover, campaign message, or editorial layout. - Use the composition to frame foreground images or text. #### Practical guidance - Reserve a clear area for text and controls. - Check the actual crop, repeat edges, and detail at the final output size. ## Visual & Technical Specs ### Visual properties - Blurry blends, subtle linear gradients, and stronger multicolor transitions appear in the set. - The artwork has no linework or surface texture. #### Technical specifications - Grid: 250x250px. - The fixed fills do not use currentColor. ### Emotional Scores These scores describe visual character. They are editorial judgments, not measured audience reactions. Each scale runs from 0.00 at the first word to 1.00 at the second, with 0.50 in the middle. For example, a lower Warm to Cold score means a warmer appearance. Gradient Backgrounds - Warm to Cold: Slightly warm (0.40). - Soft to Hard: Strongly soft (0.10). - Friendly to Formal: Slightly friendly (0.40). - Playful to Serious: Slightly playful (0.45). - Human to Mechanical: Balanced (0.50). ## Pairing & Compatibility ### Typography pairing - Humanist Sans: Try softly curved letterforms to echo the rounded shapes. For example, try Inter, Plus Jakarta Sans. - Geometric Sans: Try structured letterforms to echo the geometric shapes. For example, try Outfit, DM Sans. - Caution: Compare letter shapes and apparent weight before combining a contrasting typeface with the artwork. ## Categories - [Blurry Gradients](/elements/background-gradients/blurry-gradients) - [Linear Gradients](/elements/background-gradients/linear-gradients) ## Example elements - [Blue Yellow Red Blurry Ellipses](https://assets.streamlinehq.com/image/private/w_100,h_100,ar_1/f_auto/v1/icons/blurry-ellipses/blue-yellow-red-blurry-ellipses-2e5f8.png?_a=DATAiZkSZAA0) - [Magenta Blue Green Blurry Ellipses](https://assets.streamlinehq.com/image/private/w_100,h_100,ar_1/f_auto/v1/icons/blurry-ellipses/magenta-blue-green-blurry-ellipses-a2f99.png?_a=DATAiZkSZAA0) - [Orange Red Blue Blurry Ellipses](https://assets.streamlinehq.com/image/private/w_100,h_100,ar_1/f_auto/v1/icons/blurry-ellipses/orange-red-blue-blurry-ellipses-12312.png?_a=DATAiZkSZAA0) - [Purple Blue Green Yellow Orange Blurry Ellipses](https://assets.streamlinehq.com/image/private/w_100,h_100,ar_1/f_auto/v1/icons/blurry-ellipses/purple-blue-green-yellow-orange-blurry-ellipses-5c83a.png?_a=DATAiZkSZAA0) - [Purple Yellow Orange Green Blurry Ellipses](https://assets.streamlinehq.com/image/private/w_100,h_100,ar_1/f_auto/v1/icons/blurry-ellipses/purple-yellow-orange-green-blurry-ellipses-9160d.png?_a=DATAiZkSZAA0) - [Magenta Blue Blurry Linear](https://assets.streamlinehq.com/image/private/w_100,h_100,ar_1/f_auto/v1/icons/blurry-linear/magenta-blue-blurry-linear-ad64b.png?_a=DATAiZkSZAA0) - [Orange Violet Blurry Linear](https://assets.streamlinehq.com/image/private/w_100,h_100,ar_1/f_auto/v1/icons/blurry-linear/orange-violet-blurry-linear-4ced8.png?_a=DATAiZkSZAA0) - [Pink Purple Blurry Linear](https://assets.streamlinehq.com/image/private/w_100,h_100,ar_1/f_auto/v1/icons/blurry-linear/pink-purple-blurry-linear-b16fd.png?_a=DATAiZkSZAA0) - [Pink Red Blurry Linear](https://assets.streamlinehq.com/image/private/w_100,h_100,ar_1/f_auto/v1/icons/blurry-linear/pink-red-blurry-linear-662ff.png?_a=DATAiZkSZAA0) - [Yellow Teal Blurry Linear](https://assets.streamlinehq.com/image/private/w_100,h_100,ar_1/f_auto/v1/icons/blurry-linear/yellow-teal-blurry-linear-0b19d.png?_a=DATAiZkSZAA0) - [Blue Brown Subtle](https://assets.streamlinehq.com/image/private/w_100,h_100,ar_1/f_auto/v1/icons/linear-subtle/blue-brown-subtle-d578a.png?_a=DATAiZkSZAA0) - [Blue Yellow Subtle](https://assets.streamlinehq.com/image/private/w_100,h_100,ar_1/f_auto/v1/icons/linear-subtle/blue-yellow-subtle-1cf28.png?_a=DATAiZkSZAA0) --- [View full sitemap](/sitemap.md)