├── .eslintrc
├── .gitignore
├── .prettierignore
├── .prettierrc
├── README.md
├── components
    ├── AddColor.js
    ├── AngleRange.js
    ├── AnimatedBackground.js
    ├── Colors.js
    ├── Controls.js
    ├── Output.js
    ├── Random.js
    └── SpeedRange.js
├── context
    └── SettingsContext.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── _app.js
    ├── api
    │   └── hello.js
    └── index.js
├── public
    ├── favicon.ico
    └── vercel.svg
└── styles
    ├── .prettierignore
    ├── .prettierrc
    └── globals.css


/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next", "next/core-web-vitals"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | .cache
2 | .next
3 | package.json
4 | package-lock.json
5 | public
6 | api/socks.js
7 | node-modules


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "endOfLine": "lf",
3 |   "semi": false,
4 |   "singleQuote": false,
5 |   "tabWidth": 2,
6 |   "trailingComma": "es5"
7 | }
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Animated Gradient Background Generator
 2 | 
 3 | Created by Chicago web developer [John Polacek](https://johnpolacek.com, based on a [Pen](https://codepen.io/P1N2O/pen/pyBNzX) by Manuel Pinto.
 4 | 
 5 | #### See the demo at [animated-gradient-background-generator.netlify.app/](https://animated-gradient-background-generator.netlify.app/)
 6 | 
 7 | --
 8 | 
 9 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
10 | 
11 | ## Getting Started
12 | 
13 | First, run the development server:
14 | 
15 | ```bash
16 | npm run dev
17 | # or
18 | yarn dev
19 | ```
20 | 
21 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
22 | 


--------------------------------------------------------------------------------
/components/AddColor.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useContext } from "react"
 2 | import { ChromePicker } from "react-color"
 3 | import { SettingsContext } from "../context/SettingsContext"
 4 | 
 5 | const AddColor = () => {
 6 |   const [color, setColor] = useState("white")
 7 |   const { colorSelection, setColorSelection } = useContext(SettingsContext)
 8 | 
 9 |   return (
10 |     <>
11 |       <div style={{ display: "inline-block", paddingBottom: "32px" }}>
12 |         <ChromePicker
13 |           header="Pick Colors"
14 |           color={color}
15 |           onChange={(newColor) => {
16 |             setColor(newColor.hex)
17 |           }}
18 |         />
19 |       </div>
20 |       <div style={{ paddingBottom: "16px" }}>
21 |         <button
22 |           onClick={() => {
23 |             setColorSelection([...colorSelection, color])
24 |           }}
25 |           style={{
26 |             background: "royalblue",
27 |             color: "white",
28 |             padding: "12px 16px",
29 |             borderRadius: "8px",
30 |             border: "none",
31 |             fontSize: "16px",
32 |             cursor: "pointer",
33 |             lineHeight: 1,
34 |           }}
35 |         >
36 |           + Add Color
37 |         </button>
38 |       </div>
39 |     </>
40 |   )
41 | }
42 | 
43 | export default AddColor
44 | 


--------------------------------------------------------------------------------
/components/AngleRange.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react"
 2 | import { SettingsContext } from "../context/SettingsContext"
 3 | 
 4 | const AngleRange = () => {
 5 |   const { angle, setAngle } = useContext(SettingsContext)
 6 | 
 7 |   return (
 8 |     <div style={{ padding: "32px 0", fontSize: "18px" }}>
 9 |       <label
10 |         style={{
11 |           display: "inline-block",
12 |           fontWeight: "bold",
13 |           width: "100px",
14 |           textAlign: "right",
15 |         }}
16 |         htmlFor="angle"
17 |       >
18 |         Angle
19 |       </label>
20 |       <input
21 |         type="range"
22 |         id="angle"
23 |         name="angle"
24 |         min="0"
25 |         max="360"
26 |         value={angle}
27 |         onChange={(e) => {
28 |           setAngle(e.target.value)
29 |         }}
30 |         style={{
31 |           margin: "0 16px",
32 |           width: "180px",
33 |           position: "relative",
34 |           top: "2px",
35 |         }}
36 |       />
37 |       <span
38 |         style={{
39 |           fontSize: "14px",
40 |           padding: "0 8px",
41 |           position: "relative",
42 |           top: "-2px",
43 |           width: "120px",
44 |           display: "inline-block",
45 |         }}
46 |       >
47 |         {angle} degrees
48 |       </span>
49 |     </div>
50 |   )
51 | }
52 | 
53 | export default AngleRange
54 | 


--------------------------------------------------------------------------------
/components/AnimatedBackground.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react"
 2 | import { SettingsContext } from "../context/SettingsContext"
 3 | 
 4 | const AnimatedBackground = ({ children }) => {
 5 |   const { colorSelection, speed, angle } = useContext(SettingsContext)
 6 | 
 7 |   const background =
 8 |     "linear-gradient(" + angle + "deg, " + colorSelection.toString() + ")"
 9 | 
10 |   const backgroundSize =
11 |     colorSelection.length * 60 + "%" + " " + colorSelection.length * 60 + "%"
12 | 
13 |   const animation =
14 |     "gradient-animation " +
15 |     colorSelection.length * (Math.abs(speed - 11) / 2) +
16 |     "s ease infinite"
17 | 
18 |   return (
19 |     <div
20 |       style={{
21 |         background,
22 |         "background-size": backgroundSize,
23 |         animation,
24 |         color: "white",
25 |       }}
26 |     >
27 |       {children}
28 |     </div>
29 |   )
30 | }
31 | 
32 | export default AnimatedBackground
33 | 


--------------------------------------------------------------------------------
/components/Colors.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react"
 2 | import { SettingsContext } from "../context/SettingsContext"
 3 | 
 4 | const Colors = () => {
 5 |   const { colorSelection, setColorSelection } = useContext(SettingsContext)
 6 | 
 7 |   const onDelete = (deleteColor) => {
 8 |     setColorSelection(colorSelection.filter((color) => color !== deleteColor))
 9 |   }
10 | 
11 |   return (
12 |     <div style={{ paddingBottom: "16px" }}>
13 |       {colorSelection.map((color) => (
14 |         <div
15 |           key={color}
16 |           style={{
17 |             background: color,
18 |             display: "inline-block",
19 |             padding: "32px",
20 |             margin: "16px",
21 |             position: "relative",
22 |             borderRadius: "4px",
23 |             boxShadow: "0 2px 8px rgba(0,0,0,.33)",
24 |           }}
25 |         >
26 |           <button
27 |             onClick={() => onDelete(color)}
28 |             style={{
29 |               background: "crimson",
30 |               color: "white",
31 |               display: "inline-block",
32 |               borderRadius: "50%",
33 |               position: "absolute",
34 |               top: "-8px",
35 |               right: "-8px",
36 |               border: "none",
37 |               fontSize: "18px",
38 |               lineHeight: 1,
39 |               width: "24px",
40 |               height: "24px",
41 |               cursor: "pointer",
42 |               boxShadow: "0 0 1px #000",
43 |             }}
44 |           >
45 |             ×
46 |           </button>
47 |         </div>
48 |       ))}
49 |     </div>
50 |   )
51 | }
52 | 
53 | export default Colors
54 | 


--------------------------------------------------------------------------------
/components/Controls.js:
--------------------------------------------------------------------------------
 1 | import Colors from "./Colors"
 2 | import AddColor from "./AddColor"
 3 | import AngleRange from "./AngleRange"
 4 | import SpeedRange from "./SpeedRange"
 5 | import Random from "./Random"
 6 | 
 7 | const Controls = () => (
 8 |   <div
 9 |     style={{
10 |       background: "rgba(0,0,0,.25)",
11 |       maxWidth: "640px",
12 |       borderRadius: "8px",
13 |       margin: "auto",
14 |       padding: "32px",
15 |     }}
16 |   >
17 |     <Colors />
18 |     <AddColor />
19 |     <AngleRange />
20 |     <SpeedRange />
21 |     <Random />
22 |   </div>
23 | )
24 | 
25 | export default Controls
26 | 


--------------------------------------------------------------------------------
/components/Output.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useState } from "react"
 2 | import { SettingsContext } from "../context/SettingsContext"
 3 | 
 4 | const Output = () => {
 5 |   const [copied, setCopied] = useState(false)
 6 | 
 7 |   const { colorSelection, speed, angle } = useContext(SettingsContext)
 8 | 
 9 |   const background =
10 |     "linear-gradient(" + angle + "deg," + colorSelection.toString() + ")"
11 | 
12 |   const backgroundSize =
13 |     colorSelection.length * 60 + "%" + " " + colorSelection.length * 60 + "%"
14 | 
15 |   const animation =
16 |     "gradient-animation " +
17 |     colorSelection.length * Math.abs(speed - 11) +
18 |     "s ease infinite"
19 | 
20 |   const code = `.gradient-background {
21 |   background: ${background};
22 |   background-size: ${backgroundSize};
23 |   animation: ${animation};
24 | }
25 | 
26 | @keyframes gradient-animation {
27 |   0% {
28 |     background-position: 0% 50%;
29 |   }
30 |   50% {
31 |     background-position: 100% 50%;
32 |   }
33 |   100% {
34 |     background-position: 0% 50%;
35 |   }
36 | }`
37 | 
38 |   return (
39 |     <div
40 |       style={{ position: "relative", maxWidth: "640px", margin: "64px auto" }}
41 |     >
42 |       <pre
43 |         style={{
44 |           background: "#fff",
45 |           color: "#222",
46 |           padding: "32px",
47 |           width: "100%",
48 |           borderRadius: "4px",
49 |           textAlign: "left",
50 |           whiteSpace: "pre",
51 |           boxShadow: "0 2px 8px rgba(0,0,0,.33)",
52 |           overflowX: "scroll",
53 |         }}
54 |       >
55 |         <code>{code}</code>
56 |         <button
57 |           style={{
58 |             position: "absolute",
59 |             top: "8px",
60 |             right: "8px",
61 |             background: "royalblue",
62 |             color: "white",
63 |             padding: "8px 12px",
64 |             borderRadius: "8px",
65 |             border: "none",
66 |             fontSize: "16px",
67 |             cursor: "pointer",
68 |             lineHeight: 1,
69 |           }}
70 |           onClick={() => {
71 |             setCopied(true)
72 |             navigator.clipboard.writeText(code)
73 |           }}
74 |         >
75 |           {copied ? "copied" : "copy"}
76 |         </button>
77 |       </pre>
78 |     </div>
79 |   )
80 | }
81 | 
82 | export default Output
83 | 


--------------------------------------------------------------------------------
/components/Random.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react"
 2 | import { SettingsContext } from "../context/SettingsContext"
 3 | 
 4 | const Random = () => {
 5 |   const { setColorSelection, setAngle, setSpeed } = useContext(SettingsContext)
 6 | 
 7 |   const goRandom = () => {
 8 |     const numColors = 3 + Math.round(Math.random() * 3)
 9 |     const colors = [...Array(numColors)].map(() => {
10 |       // https://css-tricks.com/snippets/javascript/random-hex-color/
11 |       return "#" + Math.floor(Math.random() * 16777215).toString(16)
12 |     })
13 |     setColorSelection(colors)
14 |     setAngle(Math.floor(Math.random() * 361))
15 |     setSpeed(Math.floor(Math.random() * 10) + 1)
16 |   }
17 | 
18 |   return (
19 |     <div style={{ padding: "48px 0 16px" }}>
20 |       <button
21 |         onClick={goRandom}
22 |         style={{
23 |           fontSize: "24px",
24 |           fontWeight: 200,
25 |           background: "rgba(255,255,255,.9)",
26 |           color: "blue",
27 |           padding: "24px 48px",
28 |           borderRadius: "8px",
29 |           cursor: "pointer",
30 |           boxShadow: "0 0 4px #000",
31 |           border: "none",
32 |         }}
33 |       >
34 |         RANDOM
35 |       </button>
36 |     </div>
37 |   )
38 | }
39 | 
40 | export default Random
41 | 


--------------------------------------------------------------------------------
/components/SpeedRange.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from "react"
 2 | import { SettingsContext } from "../context/SettingsContext"
 3 | 
 4 | const SpeedRange = () => {
 5 |   const { speed, setSpeed } = useContext(SettingsContext)
 6 | 
 7 |   return (
 8 |     <div style={{ fontSize: "18px" }}>
 9 |       <label
10 |         style={{
11 |           display: "inline-block",
12 |           fontWeight: "bold",
13 |           width: "100px",
14 |           textAlign: "right",
15 |         }}
16 |         htmlFor="speed"
17 |       >
18 |         Speed
19 |       </label>
20 |       <input
21 |         type="range"
22 |         id="speed"
23 |         name="speed"
24 |         min="1"
25 |         max="10"
26 |         value={speed}
27 |         onChange={(e) => {
28 |           setSpeed(e.target.value)
29 |         }}
30 |         style={{
31 |           margin: "0 16px",
32 |           width: "180px",
33 |           position: "relative",
34 |           top: "2px",
35 |         }}
36 |       />
37 |       <span
38 |         style={{
39 |           fontSize: "14px",
40 |           padding: "0 8px",
41 |           position: "relative",
42 |           top: "-2px",
43 |           width: "120px",
44 |           display: "inline-block",
45 |         }}
46 |       >
47 |         {speed}
48 |       </span>
49 |     </div>
50 |   )
51 | }
52 | 
53 | export default SpeedRange
54 | 


--------------------------------------------------------------------------------
/context/SettingsContext.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, createContext } from "react"
 2 | 
 3 | const SettingsContext = createContext({ colorSelection: [] })
 4 | 
 5 | const SettingsProvider = ({ children }) => {
 6 |   const [colorSelection, setColorSelection] = useState([
 7 |     "deepskyblue",
 8 |     "darkviolet",
 9 |     "blue",
10 |   ])
11 |   const [angle, setAngle] = useState(300)
12 |   const [speed, setSpeed] = useState(5)
13 | 
14 |   return (
15 |     <SettingsContext.Provider
16 |       value={{
17 |         colorSelection,
18 |         setColorSelection,
19 |         angle,
20 |         setAngle,
21 |         speed,
22 |         setSpeed,
23 |       }}
24 |     >
25 |       {children}
26 |     </SettingsContext.Provider>
27 |   )
28 | }
29 | 
30 | export { SettingsContext, SettingsProvider }
31 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   reactStrictMode: true,
3 | }
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "animated-gradient-background-generator",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
 7 |     "format-watch": "npm run format && onchange \"**/*.{js,jsx,json,md}\" -- prettier --write {{changed}}",
 8 |     "dev": "next dev",
 9 |     "build": "next build",
10 |     "start": "next start"
11 |   },
12 |   "dependencies": {
13 |     "next": "11.0.1",
14 |     "react": "17.0.2",
15 |     "react-color": "^2.19.3",
16 |     "react-dom": "17.0.2"
17 |   },
18 |   "devDependencies": {
19 |     "eslint": "^7.31.0",
20 |     "eslint-config-next": "^11.0.1",
21 |     "onchange": "^7.1.0",
22 |     "prettier": "^2.3.2"
23 |   },
24 |   "repository": "https://github.com/johnpolacek/animated-gradient-background-generator",
25 |   "license": "MIT-0",
26 |   "author": "John Polacek (https://johnpolacek.com/)"
27 | }
28 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import "../styles/globals.css"
2 | 
3 | function MyApp({ Component, pageProps }) {
4 |   return <Component {...pageProps} />
5 | }
6 | 
7 | export default MyApp
8 | 


--------------------------------------------------------------------------------
/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json({ name: "John Doe" })
5 | }
6 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Head from "next/head"
 2 | import Image from "next/image"
 3 | import { SettingsProvider } from "../context/SettingsContext"
 4 | import AnimatedBackground from "../components/AnimatedBackground"
 5 | import Controls from "../components/Controls"
 6 | import Output from "../components/Output"
 7 | 
 8 | export default function Home() {
 9 |   return (
10 |     <>
11 |       <Head>
12 |         <title>Animated Gradient Background Generator</title>
13 |         <meta
14 |           name="description"
15 |           content="A tool for creating animated background gradients in pure CSS."
16 |         />
17 |         <link rel="icon" href="/favicon.ico" />
18 |       </Head>
19 | 
20 |       <SettingsProvider>
21 |         <AnimatedBackground>
22 |           <main style={{ textAlign: "center", padding: "32px 32px 0" }}>
23 |             <h1 style={{ fontWeight: 200, padding: "16px", fontSize: "3em" }}>
24 |               Animated Gradient Background Generator
25 |             </h1>
26 |             <Controls />
27 |             <Output />
28 |           </main>
29 |           <footer style={{ textAlign: "center", padding: "0 32px 64px" }}>
30 |             <p>
31 |               Created by Chicago web developer{" "}
32 |               <a href="http://johnpolacek.com">John Polacek</a>
33 |             </p>
34 |             <p>
35 |               Based on a{" "}
36 |               <a href="https://codepen.io/P1N2O/pen/pyBNzX">CodePen</a> by
37 |               Manuel Pinto
38 |             </p>
39 |             <p>
40 |               Open sourced on{" "}
41 |               <a href="https://github.com/johnpolacek/animated-gradient-background-generator">
42 |                 Github
43 |               </a>
44 |             </p>
45 |           </footer>
46 |         </AnimatedBackground>
47 |       </SettingsProvider>
48 |     </>
49 |   )
50 | }
51 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johnpolacek/animated-gradient-background-generator/7f42f938ef9dc60d82c0a899638864b7d3c62479/public/favicon.ico


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/styles/.prettierignore:
--------------------------------------------------------------------------------
1 | .cache
2 | .next
3 | package.json
4 | package-lock.json
5 | public
6 | api/socks.js
7 | node-modules


--------------------------------------------------------------------------------
/styles/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "endOfLine": "lf",
3 |   "semi": false,
4 |   "singleQuote": false,
5 |   "tabWidth": 2,
6 |   "trailingComma": "es5"
7 | }
8 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   padding: 0;
 4 |   margin: 0;
 5 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
 6 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 7 |   height: 100%;
 8 | }
 9 | 
10 | a {
11 |   color: inherit;
12 | }
13 | 
14 | * {
15 |   box-sizing: border-box;
16 | }
17 | 
18 | @keyframes gradient-animation {
19 |   0% {
20 |     background-position: 0% 50%;
21 |   }
22 |   50% {
23 |     background-position: 100% 50%;
24 |   }
25 |   100% {
26 |     background-position: 0% 50%;
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------