1:"$Sreact.fragment"
2:I[9766,[],""]
3:I[8924,[],""]
4:"$Sreact.suspense"
5:I[3532,["617","static/chunks/617-152a5f23ed82c03a.js","814","static/chunks/814-7909c7aa78caffd1.js","878","static/chunks/878-ba486c8924614991.js","746","static/chunks/746-2f4faf32552de3e2.js","20","static/chunks/app/(content)/blog/%5BpostSlug%5D/page-dbe57f7d522b9886.js"],"default"]
6:I[1402,["617","static/chunks/617-152a5f23ed82c03a.js","177","static/chunks/app/layout-4a85e0e69a024171.js"],""]
7:I[6648,["617","static/chunks/617-152a5f23ed82c03a.js","814","static/chunks/814-7909c7aa78caffd1.js","878","static/chunks/878-ba486c8924614991.js","746","static/chunks/746-2f4faf32552de3e2.js","20","static/chunks/app/(content)/blog/%5BpostSlug%5D/page-dbe57f7d522b9886.js"],"default"]
12:I[7150,[],""]
:HL["/_next/static/media/453ad0986adfd5d2-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
:HL["/_next/static/media/99210cba85924662-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
:HL["/_next/static/media/a996cea60bed02a3-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
:HL["/_next/static/css/e04093c052502d62.css","style"]
0:{"P":null,"b":"k2EbvP49MoeQ85arz7XX-","p":"","c":["","blog","resources",""],"i":false,"f":[[["",{"children":["(content)",{"children":["blog",{"children":[["postSlug","resources","d"],{"children":["__PAGE__",{}]}]}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/e04093c052502d62.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","children":[["$","head",null,{"children":[["$","link",null,{"rel":"preconnect","href":"https://a.pub.network/","crossOrigin":"anonymous"}],["$","link",null,{"rel":"preconnect","href":"https://b.pub.network/","crossOrigin":"anonymous"}],["$","link",null,{"rel":"preconnect","href":"https://c.pub.network/","crossOrigin":"anonymous"}],["$","link",null,{"rel":"preconnect","href":"https://d.pub.network/","crossOrigin":"anonymous"}],["$","link",null,{"rel":"preconnect","href":"https://c.amazon-adsystem.com","crossOrigin":"anonymous"}],["$","link",null,{"rel":"preconnect","href":"https://s.amazon-adsystem.com","crossOrigin":"anonymous"}],["$","link",null,{"rel":"preconnect","href":"https://btloader.com/","crossOrigin":"anonymous"}],["$","link",null,{"rel":"preconnect","href":"https://api.btloader.com/","crossOrigin":"anonymous"}],["$","link",null,{"rel":"preconnect","href":"https://cdn.confiant-integrations.net","crossOrigin":"anonymous"}]]}],["$","body",null,{"className":"__variable_07d75e __variable_df99d6 font-sans antialiased","children":[["$","$L2",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}],["$","$4",null,{"children":["$","$L5",null,{}]}],["$","$L6",null,{"strategy":"afterInteractive","src":"https://www.googletagmanager.com/gtag/js?id=G-HWMZHYCPJY"}],["$","$L6",null,{"strategy":"afterInteractive","id":"gtag-init","children":"\n            window.dataLayer = window.dataLayer || [];\n            function gtag(){dataLayer.push(arguments);}\n            gtag('js', new Date());\n            gtag('config', 'G-HWMZHYCPJY');\n          "}]]}]]}]]}],{"children":["(content)",["$","$1","c",{"children":[null,[["$","$L7",null,{}],["$","$L2",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":"$0:f:0:1:1:props:children:1:props:children:1:props:children:0:props:notFound:0:1:props:style","children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":"$0:f:0:1:1:props:children:1:props:children:1:props:children:0:props:notFound:0:1:props:children:props:children:1:props:style","children":404}],["$","div",null,{"style":"$0:f:0:1:1:props:children:1:props:children:1:props:children:0:props:notFound:0:1:props:children:props:children:2:props:style","children":["$","h2",null,{"style":"$0:f:0:1:1:props:children:1:props:children:1:props:children:0:props:notFound:0:1:props:children:props:children:2:props:children:props:style","children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}],["$","footer",null,{"className":"relative bg-white mt-10 sm:mt-12 pt-8 sm:pt-12 pb-32 px-5 sm:px-8 lg:px-0 border-t border-neutral-100","children":["$","div",null,{"className":"grid grid-cols-12 gap-x-4 max-w-[71rem] mx-auto gap-y-8 sm:gap-y-12","children":[["$","div",null,{"className":"col-span-full flex flex-col gap-y-2","children":["$L8","$L9"]}],"$La","$Lb","$Lc","$Ld"]}]}]]]}],{"children":["blog","$Le",{"children":[["postSlug","resources","d"],"$Lf",{"children":["__PAGE__","$L10",{},null,false]},null,false]},null,false]},null,false]},null,false],"$L11",false]],"m":"$undefined","G":["$12",[]],"s":false,"S":true}
13:I[2619,["617","static/chunks/617-152a5f23ed82c03a.js","814","static/chunks/814-7909c7aa78caffd1.js","878","static/chunks/878-ba486c8924614991.js","746","static/chunks/746-2f4faf32552de3e2.js","20","static/chunks/app/(content)/blog/%5BpostSlug%5D/page-dbe57f7d522b9886.js"],""]
15:I[4431,[],"OutletBoundary"]
17:I[5278,[],"AsyncMetadataOutlet"]
19:I[4431,[],"ViewportBoundary"]
1b:I[4431,[],"MetadataBoundary"]
8:["$","div",null,{"className":"flex items-center gap-x-3 text-lg sm:text-xl font-black tracking-tight","children":[["$","svg",null,{"width":"24","height":"24","viewBox":"0 0 24 24","fill":"none","xmlns":"http://www.w3.org/2000/svg","children":[["$","circle",null,{"cx":"12","cy":"12","r":"12","fill":"url(#paint0_linear_16_2545)"}],["$","linearGradient",null,{"id":"paint0_linear_16_2545","x1":"-2.61801e-07","y1":"5.06535","x2":"24","y2":"18.9346","gradientUnits":"userSpaceOnUse","children":[["$","stop",null,{"stopColor":"#00BAAD"}],["$","stop",null,{"offset":"0.5","stopColor":"#57C785"}],["$","stop",null,{"offset":"1","stopColor":"#ADD45C"}]]}]]}],["$","span",null,{"children":"CSS Gradient"}]]}]
9:["$","div",null,{"className":"flex flex-wrap items-center gap-x-2 text-neutral-500 text-sm","children":[["$","p",null,{"children":["© 2017–",2026]}],["$","$L13",null,{"href":"/privacy-policy","className":"underline","children":"Privacy Policy"}],["$","button",null,{"id":"pmLink","children":"Privacy Manager"}]]}]
a:["$","div",null,{"className":"col-span-6 sm:col-span-3 lg:col-span-2 flex flex-col gap-y-4","children":[["$","div",null,{"className":"text-neutral-500 text-xs uppercase tracking-wider font-black","children":"Sharing"}],["$","div",null,{"className":"flex items-center gap-x-4","children":[["$","a",null,{"href":"https://www.facebook.com/sharer/sharer.php?u=https://cssgradient.io","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-brand-facebook ","children":["$undefined",["$","path","svg-0",{"d":"M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3"}],"$undefined"]}]}],["$","a",null,{"href":"https://twitter.com/share?url=https://cssgradient.io&text=CSS%20Gradient%20is%20a%20happy%20little%20tool%20to%20create%20sweet%20gradients%20for%20the%20web,%20designed%20by%20@moeamaya","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-brand-x ","children":["$undefined",["$","path","svg-0",{"d":"M4 4l11.733 16h4.267l-11.733 -16z"}],["$","path","svg-1",{"d":"M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"}],"$undefined"]}]}]]}]]}]
b:["$","div",null,{"className":"col-span-6 sm:col-span-3 lg:col-span-2 flex flex-col gap-y-4","children":[["$","div",null,{"className":"text-neutral-500 text-xs uppercase tracking-wider font-black","children":"Pages"}],["$","ul",null,{"className":"flex flex-col gap-y-3 leading-none","children":[["$","li",null,{"children":["$","$L13",null,{"href":"/blog","children":"Blog"}]}],["$","li",null,{"children":["$","$L13",null,{"href":"/color-shades","children":"Color Shades"}]}],["$","li",null,{"children":["$","$L13",null,{"href":"/gradient-backgrounds","children":"Backgrounds"}]}],["$","li",null,{"children":["$","$L13",null,{"href":"/swatches","children":"Gradients"}]}]]}]]}]
c:["$","div",null,{"className":"col-span-6 sm:col-span-3 lg:col-span-2 flex flex-col gap-y-4","children":[["$","div",null,{"className":"text-neutral-500 text-xs uppercase tracking-wider font-black","children":"Network"}],["$","ul",null,{"className":"flex flex-col gap-y-3 leading-none","children":[["$","li",null,{"children":["$","a",null,{"href":"https://coolbackgrounds.io/","children":"Cool Backgrounds"}]}],["$","li",null,{"children":["$","a",null,{"href":"https://visual.app/","children":"Visual"}]}]]}]]}]
d:["$","div",null,{"className":"col-span-6 sm:col-span-3 lg:col-span-2 flex flex-col gap-y-4","children":[["$","div",null,{"className":"text-neutral-500 text-xs uppercase tracking-wider font-black","children":"Links"}],["$","ul",null,{"className":"flex flex-col gap-y-3 leading-none","children":[["$","li",null,{"children":["$","$L13",null,{"href":"/sitemap.xml","children":"Sitemap"}]}],["$","li",null,{"children":["$","a",null,{"href":"https://visual.app/","children":"Credit"}]}]]}]]}]
e:["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}]
f:["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}]
10:["$","$1","c",{"children":["$L14",null,["$","$L15",null,{"children":["$L16",["$","$L17",null,{"promise":"$@18"}]]}]]}]
11:["$","$1","h",{"children":[null,[["$","$L19",null,{"children":"$L1a"}],["$","meta",null,{"name":"next-size-adjust","content":""}]],["$","$L1b",null,{"children":["$","div",null,{"hidden":true,"children":["$","$4",null,{"fallback":null,"children":"$L1c"}]}]}]]}]
1a:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
16:null
1d:I[5901,["617","static/chunks/617-152a5f23ed82c03a.js","814","static/chunks/814-7909c7aa78caffd1.js","878","static/chunks/878-ba486c8924614991.js","746","static/chunks/746-2f4faf32552de3e2.js","20","static/chunks/app/(content)/blog/%5BpostSlug%5D/page-dbe57f7d522b9886.js"],"default"]
1e:I[1356,["617","static/chunks/617-152a5f23ed82c03a.js","814","static/chunks/814-7909c7aa78caffd1.js","878","static/chunks/878-ba486c8924614991.js","746","static/chunks/746-2f4faf32552de3e2.js","20","static/chunks/app/(content)/blog/%5BpostSlug%5D/page-dbe57f7d522b9886.js"],"Image"]
20:I[3508,["617","static/chunks/617-152a5f23ed82c03a.js","814","static/chunks/814-7909c7aa78caffd1.js","878","static/chunks/878-ba486c8924614991.js","746","static/chunks/746-2f4faf32552de3e2.js","20","static/chunks/app/(content)/blog/%5BpostSlug%5D/page-dbe57f7d522b9886.js"],"default"]
14:[["$","header",null,{"className":"relative bg-white sm:h-64 lg:h-72 px-5 sm:px-6 lg:px-0 sm:border-b sm:border-neutral-100","children":[["$","div",null,{"className":"grid grid-cols-12 gap-x-4 max-w-[71rem] mx-auto relative z-50 h-full content-center gap-y-1 pt-10 sm:pt-0 pb-2 sm:pb-8","children":[["$","ol",null,{"className":"col-span-full flex items-center gap-x-1 sm:gap-x-2 leading-none text-xs text-neutral-500 font-black uppercase tracking-wider","children":[["$","li",null,{"children":["$","$L13",null,{"href":"/","children":"Home"}]}],[["$","$1","Blog",{"children":[["$","li",null,{"children":["$","span",null,{"children":"›"}]}],["$","li",null,{"children":["$","$L13",null,{"href":"/blog","children":"Blog"}]}]]}],["$","$1","Article",{"children":[["$","li",null,{"children":["$","span",null,{"children":"›"}]}],["$","li",null,{"children":["$","span",null,{"children":"Article"}]}]]}]]]}],["$","h1",null,{"className":"col-span-full sm:col-span-10 md:col-span-8 font-black text-4xl sm:text-5xl mt-2 tracking-tight","children":"CSS Gradient Resources"}],"$undefined",["$","div",null,{"className":"col-span-full sm:hidden mt-6","children":["$","$L1d",null,{}]}]]}],["$","div",null,{"className":"hidden sm:block absolute top-0 right-0 sm:h-full w-40 sm:w-90 lg:w-120 overflow-hidden flex items-center","children":["$","$L1e",null,{"src":"https://cssgradient.imgix.net/2RMXqZq7VZw34dDfLYMtXv/1089f0f5538a3b0ce3b6cd57401f57bd/css-gradient-blog-article.png","alt":"CSS Gradient Blog Article","width":1920,"height":1280,"sizes":"(min-width: 1280px) 800px, (min-width: 1024px) 720px, (min-width: 768px) 640px, 240px","className":"w-200 sm:w-108 lg:w-120 max-w-none h-auto block sm:-mt-8"}]}]]}],["$","main",null,{"children":["$","article",null,{"className":"relative max-w-300 grid grid-cols-12 gap-4 mx-auto sm:px-6 lg:px-8","children":["$L1f",["$","aside",null,{"className":"hidden md:flex min-w-75 min-h-150 col-span-4 col-start-9 row-span-full flex-col gap-8 items-end md:mt-8","children":[["$","$L20","0",{"index":0,"className":""}],["$","$L20","1",{"index":1,"className":""}],["$","$L20","2",{"index":2,"className":"sticky top-8"}]]}]]}]}],["$","section",null,{"className":"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mt-8 md:mt-12 max-w-300 mx-auto px-5 sm:px-6 lg:px-8","children":[["$","h2",null,{"className":"text-xl sm:text-2xl font-black tracking-[-0.02em] mb-1 sm:mb-2 col-span-full","children":"Related Posts"}],[["$","$L13","css-gradient-examples",{"href":"/blog/css-gradient-examples","className":"flex flex-col gap-y-2 border border-neutral-200 rounded-md bg-white overflow-hidden","children":[["$","div",null,{"className":"pl-4 pt-4 bg-teal-50","children":["$","$L1e",null,{"src":"https://cssgradient.imgix.net/2RMXqZq7VZw34dDfLYMtXv/1089f0f5538a3b0ce3b6cd57401f57bd/css-gradient-blog-article.png","alt":"CSS Gradient Blog Article","width":1920,"height":1280,"sizes":"(min-width: 768px) 192px, 100vw","className":"w-full h-auto block"}]}],["$","div",null,{"className":"h-full flex flex-col justify-between gap-4 p-4","children":[["$","h3",null,{"className":"text-lg font-medium leading-tight min-h-12","children":"16 Super Fire CSS Gradient Examples"}],["$","p",null,{"className":"text-xs text-neutral-500 uppercase tracking-wider font-black","children":"Article"}]]}]]}],["$","$L13","how-to-create-a-gradient-background",{"href":"/blog/how-to-create-a-gradient-background","className":"flex flex-col gap-y-2 border border-neutral-200 rounded-md bg-white overflow-hidden","children":[["$","div",null,{"className":"pl-4 pt-4 bg-teal-50","children":["$","$L1e",null,{"src":"https://cssgradient.imgix.net/5czvElicY9HRj4e654BM7f/7473de62f34ab20fbef86e1ef2803acc/how-to-create-a-gradient-background-hero-image.png","alt":"How to Create a Gradient Background Hero Image","width":1920,"height":1280,"sizes":"(min-width: 768px) 192px, 100vw","className":"w-full h-auto block"}]}],["$","div",null,{"className":"h-full flex flex-col justify-between gap-4 p-4","children":[["$","h3",null,{"className":"text-lg font-medium leading-tight min-h-12","children":"How to create a gradient background"}],["$","p",null,{"className":"text-xs text-neutral-500 uppercase tracking-wider font-black","children":"Tutorial"}]]}]]}],"$L21","$L22"]]}],"$L23"]
24:I[8558,["617","static/chunks/617-152a5f23ed82c03a.js","814","static/chunks/814-7909c7aa78caffd1.js","878","static/chunks/878-ba486c8924614991.js","746","static/chunks/746-2f4faf32552de3e2.js","20","static/chunks/app/(content)/blog/%5BpostSlug%5D/page-dbe57f7d522b9886.js"],"default"]
21:["$","$L13","gradient-patterns",{"href":"/blog/gradient-patterns","className":"flex flex-col gap-y-2 border border-neutral-200 rounded-md bg-white overflow-hidden","children":[["$","div",null,{"className":"pl-4 pt-4 bg-teal-50","children":["$","$L1e",null,{"src":"https://cssgradient.imgix.net/2RMXqZq7VZw34dDfLYMtXv/1089f0f5538a3b0ce3b6cd57401f57bd/css-gradient-blog-article.png","alt":"CSS Gradient Blog Article","width":1920,"height":1280,"sizes":"(min-width: 768px) 192px, 100vw","className":"w-full h-auto block"}]}],["$","div",null,{"className":"h-full flex flex-col justify-between gap-4 p-4","children":[["$","h3",null,{"className":"text-lg font-medium leading-tight min-h-12","children":"You Crazy? Patterns with CSS Gradients"}],["$","p",null,{"className":"text-xs text-neutral-500 uppercase tracking-wider font-black","children":"Article"}]]}]]}]
22:["$","$L13","linear-gradient-css",{"href":"/blog/linear-gradient-css","className":"flex flex-col gap-y-2 border border-neutral-200 rounded-md bg-white overflow-hidden","children":[["$","div",null,{"className":"pl-4 pt-4 bg-teal-50","children":["$","$L1e",null,{"src":"https://cssgradient.imgix.net/57LIQnhyJVpfNwnwzmdnGV/baa83ecb7eceee066acedcd81f93be2e/css-gradient-blog-reference.png","alt":"CSS Gradient Blog Reference","width":1920,"height":1280,"sizes":"(min-width: 768px) 192px, 100vw","className":"w-full h-auto block"}]}],["$","div",null,{"className":"h-full flex flex-col justify-between gap-4 p-4","children":[["$","h3",null,{"className":"text-lg font-medium leading-tight min-h-12","children":"Linear Gradient CSS"}],["$","p",null,{"className":"text-xs text-neutral-500 uppercase tracking-wider font-black","children":"Reference"}]]}]]}]
23:["$","$L24",null,{}]
25:I[622,[],"IconMark"]
18:{"metadata":[["$","title","0",{"children":"CSS Gradient Resources – CSS Gradient"}],["$","meta","1",{"name":"description","content":"Explore the ultimate resource for gradients—from CSS syntax and geometry to design tips and interactive docs. Everything you need to master gradients in one place."}],["$","link","2",{"rel":"canonical","href":"https://cssgradient.io/blog/resources/"}],["$","meta","3",{"property":"og:title","content":"CSS Gradient Resources"}],["$","meta","4",{"property":"og:description","content":"Explore the ultimate resource for gradients—from CSS syntax and geometry to design tips and interactive docs. Everything you need to master gradients in one place."}],["$","meta","5",{"property":"og:url","content":"https://cssgradient.io/blog/resources/"}],["$","meta","6",{"property":"og:site_name","content":"CSS Gradient"}],["$","meta","7",{"property":"og:image","content":"https://cssgradient.imgix.net/2D7D3doj2pB2ATltjhTzpt/217e629860a33a4b8d026d9ddd53c362/css-gradient-resources.png"}],["$","meta","8",{"property":"og:image:width","content":"1920"}],["$","meta","9",{"property":"og:image:height","content":"1200"}],["$","meta","10",{"property":"og:type","content":"website"}],["$","meta","11",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","12",{"name":"twitter:title","content":"CSS Gradient Resources"}],["$","meta","13",{"name":"twitter:description","content":"Explore the ultimate resource for gradients—from CSS syntax and geometry to design tips and interactive docs. Everything you need to master gradients in one place."}],["$","meta","14",{"name":"twitter:image","content":"https://cssgradient.imgix.net/2D7D3doj2pB2ATltjhTzpt/217e629860a33a4b8d026d9ddd53c362/css-gradient-resources.png"}],["$","link","15",{"rel":"icon","href":"/favicon.ico","type":"image/x-icon","sizes":"48x48"}],["$","link","16",{"rel":"icon","href":"/icon.svg?a62173ca109fae84","type":"image/svg+xml","sizes":"any"}],["$","link","17",{"rel":"icon","href":"/icon1.png?3e6e7c0b73eb869c","type":"image/png","sizes":"192x192"}],["$","link","18",{"rel":"icon","href":"/icon2.png?d0b9c85ae99d0a75","type":"image/png","sizes":"512x512"}],["$","link","19",{"rel":"apple-touch-icon","href":"/apple-icon.png?d16ad86f908a69b7","type":"image/png","sizes":"180x180"}],["$","$L25","20",{}]],"error":null,"digest":"$undefined"}
1c:"$18:metadata"
26:I[4340,["617","static/chunks/617-152a5f23ed82c03a.js","814","static/chunks/814-7909c7aa78caffd1.js","878","static/chunks/878-ba486c8924614991.js","746","static/chunks/746-2f4faf32552de3e2.js","20","static/chunks/app/(content)/blog/%5BpostSlug%5D/page-dbe57f7d522b9886.js"],"default"]
1f:["$","section",null,{"className":"col-span-full md:col-span-8 bg-white sm:rounded-md lg:-mx-8 sm:-mt-8 px-5 sm:px-8 py-4 sm:py-8 sm:border sm:border-neutral-200","children":["$undefined",["$","div",null,{"className":"rich-text","children":[["$","h2","0",{"id":"all-you-ever-needed-to-know-about-gradients","children":["All you ever needed to know about gradients 📚"]}],["$","p","1",{"children":["Time for a knowledge bomb. The resources on this page get into the nitty gritty details about gradients, from mathematical proofs to the psychology of emotional responses from colors. There’s more information here than you'll most likely need, but this page will always be here as an up-to-date reference."]}],["$","h2","2",{"id":"dig-deep-into-css-linear-gradients","children":["Dig Deep into CSS Linear Gradients"]}],["$","$L26","3",{"asset":{"sys":{"id":"5Pp0S8L6QMo0piqyapZvu0"},"url":"https://images.ctfassets.net/uhu2li3kpsns/5Pp0S8L6QMo0piqyapZvu0/c8a6beb0fbafd22bc80aece4987711a1/deep-dive-linear-gradients.jpg","width":1200,"height":651,"title":"Deep Dive Linear Gradients","description":""}}],["$","p","4",{"children":["For a fascinating deep dive into the mathematical concepts involved in creating the gradient spec, check out this superb article by CSS guru Ana Tudor. With visual diagrams written in code, she breaks down exactly how ",["$","$L13","1",{"href":"/blog/linear-gradient-css","children":["linear gradient color stops"]}]," are positioned and shows the box extents of a rotated gradient."]}],["$","p","5",{"children":["",["$","a","1",{"href":"https://kittygiraudel.com/2013/02/04/dig-deep-into-css-gradients/","children":["Learn more →"]}],""]}],["$","h2","6",{"id":"how-are-gradient-paths-calculated","children":["How Are Gradient Paths Calculated?"]}],["$","$L26","7",{"asset":{"sys":{"id":"7a5hVliG6lYXl9hY0qvGQC"},"url":"https://images.ctfassets.net/uhu2li3kpsns/7a5hVliG6lYXl9hY0qvGQC/56c1d6ef1bce9fcb34a267886760f388/gradient-calculation.jpg","width":1200,"height":603,"title":"Gradient Calculation","description":""}}],["$","p","8",{"children":["Into algorithms and RGBA color spaces? Get super technical with this insightful Stack Overflow post describing how CSS Gradients are exactly the same as the W3C canvas spec except for one small difference. At the end there's a visual code sample examining the different transparency operations."]}],["$","p","9",{"children":["",["$","a","1",{"href":"https://stackoverflow.com/questions/41493785/how-is-a-css-gradient-path-calculated","children":["Learn more →"]}],""]}],["$","h2","10",{"id":"super-smooth-linear-gradients","children":["Super Smooth Linear Gradients"]}],["$","$L26","11",{"asset":{"sys":{"id":"1fr6m4QKbq9X932eXBssOO"},"url":"https://images.ctfassets.net/uhu2li3kpsns/1fr6m4QKbq9X932eXBssOO/09e9d99a2ebf740c340c9446449d1992/easing-linear-gradients.jpg","width":1200,"height":598,"title":"Easing Linear Gradients","description":""}}],["$","p","12",{"children":["As you’re using ",["$","a","1",{"href":"/","children":["our tool to create gradients"]}],", you might notice a harsh line when certain colors aren't quite blending together. This article describes a technique similar to one you’d use in animation, where you ease into each color stop helping to seamlessly blend one to another."]}],["$","p","13",{"children":["",["$","a","1",{"href":"https://css-tricks.com/easing-linear-gradients/","children":["Learn more →"]}],""]}],["$","h2","14",{"id":"read-the-w3c-gradient-docs","children":["Read the W3C Gradient Docs"]}],["$","$L26","15",{"asset":{"sys":{"id":"1zhJtPJUjd7apQ5eW1bgZN"},"url":"https://images.ctfassets.net/uhu2li3kpsns/1zhJtPJUjd7apQ5eW1bgZN/19f7c7e32a939c0272d6077f11b76ab5/w3c-gradient.jpg","width":1200,"height":648,"title":"W3C Gradient","description":""}}],["$","p","16",{"children":["Why not go straight to the source? Well for one the documentation can be a bit confusing, and it’s not written for a general audience. But in reality if you’re looking to really, deeply understand what you can do with CSS gradients, the official docs are the best way to get that information."]}],"$L27","$L28","$L29","$L2a","$L2b","$L2c","$L2d","$L2e"]}]]}]
27:["$","p","17",{"children":["",["$","a","1",{"href":"https://drafts.csswg.org/css-images-3/#gradients","children":["Learn more →"]}],""]}]
28:["$","h2","18",{"id":"mdn-gradient-docs","children":["MDN Gradient Docs"]}]
29:["$","$L26","19",{"asset":{"sys":{"id":"3lQRuSIbzhjJw5fbh4a3T2"},"url":"https://images.ctfassets.net/uhu2li3kpsns/3lQRuSIbzhjJw5fbh4a3T2/f112b28a79a8e2eccaf2ecf009126548/mdn-gradients.jpg","width":1200,"height":669,"title":"MDN Gradients","description":""}}]
2a:["$","p","20",{"children":["Mozilla as they are wont to do has taken the previously mentioned W3C specification and made it visual and interactive. Within a demo ",["$","$L13","1",{"href":"/blog/radial-gradient-css","children":["explaining radial gradients"]}],", you can play with the code directly on the page! If the W3C docs scared you away, check this resource out instead."]}]
2b:["$","p","21",{"children":["",["$","a","1",{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient","children":["Learn more →"]}],""]}]
2c:["$","h2","22",{"id":"additional-design-resources","children":["Additional Design Resources"]}]
2d:["$","p","23",{"children":["",["$","a","1",{"href":"https://coolbackgrounds.io/","children":["Free Desktop Backgrounds"]}],""]}]
2e:["$","p","24",{"children":["Cool Backgrounds is a large collection of the newest wallpaper images for you desktop, laptop or mobile phone. Customize with multiple colors and types to suit your style."]}]