├── .gitignore ├── LICENSE ├── README.md ├── app ├── components │ ├── splash-screen-wrapper.tsx │ └── splash-screen.tsx ├── favicon.ico ├── globals.css ├── layout.tsx ├── opengraph-image.png ├── page.tsx └── pwa.ts ├── assets ├── index.tsx └── logo.svg ├── components.json ├── components ├── core-ui │ ├── canvas-preview.tsx │ ├── desktop-app.tsx │ ├── footer.tsx │ ├── mobile-app.tsx │ └── wallpaper-preview.tsx ├── drawer-content │ └── settings-drawer-content.tsx ├── theme-provider.tsx └── ui │ ├── animatedGradient.tsx │ ├── button.tsx │ ├── buttonsChin.tsx │ ├── dialog.tsx │ ├── drawer.tsx │ ├── dropdown-menu.tsx │ ├── input.tsx │ ├── label.tsx │ ├── marquee.tsx │ ├── popover.tsx │ ├── position-control.tsx │ ├── scroll-area.tsx │ ├── select.tsx │ ├── separator.tsx │ ├── sidebarHeader.tsx │ ├── slider.tsx │ ├── sonner.tsx │ ├── switch.tsx │ ├── tabs.tsx │ ├── textarea.tsx │ └── themeSwitch.tsx ├── eslint.config.mjs ├── hooks ├── use-debounced-dimensions.ts └── use-safari-check.ts ├── lib ├── constants.ts ├── fonts.ts ├── icons │ ├── github.tsx │ └── twitter.tsx ├── utils.ts └── utils │ ├── effects.ts │ └── shapes.ts ├── next.config.ts ├── package.json ├── pnpm-lock.yaml ├── postcss.config.mjs ├── public ├── icons │ ├── logo-192.png │ └── logo-512.png ├── logo.svg ├── manifest.json └── service-worker.js ├── store └── wallpaper.ts ├── tailwind.config.ts └── tsconfig.json /.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.* 7 | .yarn/* 8 | !.yarn/patches 9 | !.yarn/plugins 10 | !.yarn/releases 11 | !.yarn/versions 12 | 13 | # testing 14 | /coverage 15 | 16 | # next.js 17 | /.next/ 18 | /out/ 19 | 20 | # production 21 | /build 22 | 23 | # misc 24 | .DS_Store 25 | *.pem 26 | 27 | # debug 28 | npm-debug.log* 29 | yarn-debug.log* 30 | yarn-error.log* 31 | .pnpm-debug.log* 32 | 33 | # env files (can opt-in for committing if needed) 34 | .env* 35 | 36 | # vercel 37 | .vercel 38 | 39 | # typescript 40 | *.tsbuildinfo 41 | next-env.d.ts 42 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2025 Keshav Bagaade 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy 5 | of this software and associated documentation files (the "Software"), to deal 6 | in the Software without restriction, including without limitation the rights 7 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the Software is 9 | furnished to do so, subject to the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be included in all 12 | copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 20 | SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Gradii

2 | 3 |

4 | 5 | 6 | 7 | 8 |

9 | 10 | ![GithubBanner](./app/opengraph-image.png) 11 | 12 |

13 | Create beautiful mesh gradients at https://gradii.fun. 14 |

15 | 16 | ## Why Gradii? 17 | 18 | I use mesh gradients as wallpapers and most of these gradients are locked behind paywalls or not free to use. So I built Gradii - a simple tool that could generate cool gradients for myself and others who love minimal, beautiful wallpapers. What started as a personal project turned into something I wanted to share with everyone who appreciates good design. 19 | 20 | ## What can Gradii do? 21 | 22 | - Create stunning mesh gradients 23 | - Add text overlays with various fonts and styles 24 | - Add image overlays 25 | - Use it as your wallpaper or as a marketing asset the possibilities are wide 26 | - Export in multiple resolutions and aspect ratios 27 | 28 | ## Development 29 | 30 | ```bash 31 | cd wallpaper-app 32 | pnpm install 33 | pnpm dev 34 | ``` 35 | 36 | ## License & Contributing 37 | 38 | This project uses the MIT license. See the [LICENSE](LICENSE) file for details. 39 | 40 | ## Contact & Support 41 | 42 | Found a bug or have feedback? Feel free to [DM me on X](https://x.com/kshvbgde). 43 | -------------------------------------------------------------------------------- /app/components/splash-screen-wrapper.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useState, useEffect, Suspense } from "react"; 4 | import { SplashScreen } from "./splash-screen"; 5 | import { AnimatePresence } from "framer-motion"; 6 | import { Loader2Icon } from "lucide-react"; 7 | interface SplashScreenWrapperProps { 8 | children: React.ReactNode; 9 | } 10 | 11 | export function SplashScreenWrapper({ children }: SplashScreenWrapperProps) { 12 | const [showSplash, setShowSplash] = useState(true); 13 | 14 | useEffect(() => { 15 | const timer = setTimeout(() => { 16 | setShowSplash(false); 17 | }, 2000); 18 | 19 | return () => clearTimeout(timer); 20 | }, []); 21 | 22 | return ( 23 | <> 24 | 25 | 28 | } 29 | > 30 | {showSplash ? : children} 31 | 32 | 33 | 34 | ); 35 | } 36 | -------------------------------------------------------------------------------- /app/components/splash-screen.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { motion } from "framer-motion"; 4 | import Image from "next/image"; 5 | import logo from "@/public/logo.svg"; 6 | 7 | export function SplashScreen() { 8 | return ( 9 | 15 | 25 | Gradii 26 | 27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/keshav-exe/wallpaper-app/eb7573a157d541e81c76800f216f03bf30d61ee1/app/favicon.ico -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | 3 | @plugin 'tailwindcss-animate'; 4 | 5 | @custom-variant dark (&:is(.dark *)); 6 | 7 | @theme { 8 | --color-background: hsl(var(--background)); 9 | --color-foreground: hsl(var(--foreground)); 10 | 11 | --color-card: hsl(var(--card)); 12 | --color-card-foreground: hsl(var(--card-foreground)); 13 | 14 | --color-popover: hsl(var(--popover)); 15 | --color-popover-foreground: hsl(var(--popover-foreground)); 16 | 17 | --color-primary: hsl(var(--primary)); 18 | --color-primary-foreground: hsl(var(--primary-foreground)); 19 | 20 | --color-secondary: hsl(var(--secondary)); 21 | --color-secondary-foreground: hsl(var(--secondary-foreground)); 22 | 23 | --color-muted: hsl(var(--muted)); 24 | --color-muted-foreground: hsl(var(--muted-foreground)); 25 | 26 | --color-accent: hsl(var(--accent)); 27 | --color-accent-foreground: hsl(var(--accent-foreground)); 28 | 29 | --color-destructive: hsl(var(--destructive)); 30 | --color-destructive-foreground: hsl(var(--destructive-foreground)); 31 | 32 | --color-border: hsl(var(--border)); 33 | --color-input: hsl(var(--input)); 34 | --color-ring: hsl(var(--ring)); 35 | 36 | --color-chart-1: hsl(var(--chart-1)); 37 | --color-chart-2: hsl(var(--chart-2)); 38 | --color-chart-3: hsl(var(--chart-3)); 39 | --color-chart-4: hsl(var(--chart-4)); 40 | --color-chart-5: hsl(var(--chart-5)); 41 | 42 | --radius-lg: var(--radius); 43 | --radius-md: calc(var(--radius) - 2px); 44 | --radius-sm: calc(var(--radius) - 4px); 45 | 46 | --animate-marquee: marquee var(--duration) infinite linear; 47 | --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite; 48 | 49 | @keyframes marquee { 50 | from { 51 | transform: translateX(0); 52 | } 53 | to { 54 | transform: translateX(calc(-100% - var(--gap))); 55 | } 56 | } 57 | @keyframes marquee-vertical { 58 | from { 59 | transform: translateY(0); 60 | } 61 | to { 62 | transform: translateY(calc(-100% - var(--gap))); 63 | } 64 | } 65 | } 66 | 67 | /* 68 | The default border color has changed to `currentColor` in Tailwind CSS v4, 69 | so we've added these compatibility styles to make sure everything still 70 | looks the same as it did with Tailwind CSS v3. 71 | 72 | If we ever want to remove these styles, we need to add an explicit border 73 | color utility to any element that depends on these defaults. 74 | */ 75 | @layer base { 76 | *, 77 | ::after, 78 | ::before, 79 | ::backdrop, 80 | ::file-selector-button { 81 | border-color: var(--color-gray-200, currentColor); 82 | } 83 | } 84 | 85 | @layer base { 86 | :root { 87 | --background: 0 0% 100%; 88 | --foreground: 240 10% 3.9%; 89 | --card: 0 0% 100%; 90 | --card-foreground: 240 10% 3.9%; 91 | --popover: 0 0% 100%; 92 | --popover-foreground: 240 10% 3.9%; 93 | --primary: 240 5.9% 10%; 94 | --primary-foreground: 0 0% 98%; 95 | --secondary: 240 4.8% 95.9%; 96 | --secondary-foreground: 240 5.9% 10%; 97 | --muted: 240 4.8% 92.9%; 98 | --muted-foreground: 240 3.8% 46.1%; 99 | --accent: 240 4.8% 95.9%; 100 | --accent-foreground: 240 5.9% 10%; 101 | --destructive: 0 84.2% 60.2%; 102 | --destructive-foreground: 0 0% 98%; 103 | --border: 240 5.9% 90%; 104 | --input: 240 5.9% 90%; 105 | --ring: 240 5.9% 10%; 106 | --radius: 0.5rem; 107 | } 108 | 109 | .dark { 110 | --background: 240 10% 3.9%; 111 | --foreground: 0 0% 98%; 112 | --card: 240 10% 3.9%; 113 | --card-foreground: 0 0% 98%; 114 | --popover: 240 10% 3.9%; 115 | --popover-foreground: 0 0% 98%; 116 | --primary: 0 0% 98%; 117 | --primary-foreground: 240 5.9% 10%; 118 | --secondary: 240 3.7% 8%; 119 | --secondary-foreground: 0 0% 98%; 120 | --muted: 240 3.7% 6%; 121 | --muted-foreground: 240 5% 64.9%; 122 | --accent: 240 3.7% 8%; 123 | --accent-foreground: 0 0% 98%; 124 | --destructive: 0 62.8% 30.6%; 125 | --destructive-foreground: 0 0% 98%; 126 | --border: 240 3.7% 8%; 127 | --input: 240 3.7% 8%; 128 | --ring: 240 4.9% 83.9%; 129 | } 130 | } 131 | 132 | @layer base { 133 | * { 134 | @apply border-border; 135 | -webkit-user-select: none; 136 | -moz-user-select: none; 137 | -ms-user-select: none; 138 | user-select: none; 139 | } 140 | body { 141 | @apply bg-background text-foreground; 142 | } 143 | } 144 | 145 | .no-scrollbar::-webkit-scrollbar { 146 | display: none; 147 | } 148 | 149 | .no-scrollbar { 150 | scrollbar-width: none; 151 | -webkit-overflow-scrolling: touch; 152 | overflow-y: auto; 153 | } 154 | 155 | .dark ::selection { 156 | background-color: hsl(var(--accent)); 157 | color: hsl(var(--foreground)); 158 | } 159 | 160 | ::view-transition-group(root) { 161 | animation-duration: 0.7s; 162 | animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1); 163 | } 164 | 165 | ::view-transition-new(root) { 166 | animation-name: reveal-light; 167 | } 168 | 169 | ::view-transition-old(root), 170 | .dark::view-transition-old(root) { 171 | animation: none; 172 | z-index: -1; 173 | } 174 | .dark::view-transition-new(root) { 175 | animation-name: reveal-dark; 176 | } 177 | 178 | @keyframes reveal-dark { 179 | from { 180 | clip-path: inset(0 100% 0 0); 181 | } 182 | to { 183 | clip-path: inset(0 0 0 0); 184 | } 185 | } 186 | 187 | @keyframes reveal-light { 188 | from { 189 | clip-path: inset(0 100% 0 0); 190 | } 191 | to { 192 | clip-path: inset(0 0 0 0); 193 | } 194 | } 195 | 196 | * { 197 | user-select: none; 198 | } 199 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import "./globals.css"; 2 | import { onest } from "@/lib/fonts"; 3 | import { Toaster } from "@/components/ui/sonner"; 4 | import { ThemeProvider } from "@/components/theme-provider"; 5 | import { Analytics } from "@vercel/analytics/react"; 6 | import { SplashScreenWrapper } from "@/app/components/splash-screen-wrapper"; 7 | 8 | export const metadata = { 9 | title: "Gradii - Generate Beautiful Gradients", 10 | description: 11 | "A simple gradient generator tool made by designer for designers to create stunning gradients with customizable colors, text, and effects. Use it for your designs, wallpapers, presentations, or mockups or just for fun.", 12 | metadataBase: new URL("https://gradii.fun"), 13 | keywords: [ 14 | // Core Features 15 | "gradient generator", 16 | "gradient maker", 17 | "gradient creator", 18 | "gradient design tool", 19 | "gradient background maker", 20 | "gradient wallpaper creator", 21 | 22 | // Types & Use Cases 23 | "desktop wallpaper", 24 | "mobile wallpaper", 25 | "4K wallpaper", 26 | "custom wallpaper", 27 | "background generator", 28 | "website background", 29 | "presentation background", 30 | "social media background", 31 | 32 | // Technical Features 33 | "canvas effects", 34 | "grain effect", 35 | "vignette effect", 36 | "text effects", 37 | "color palette", 38 | "color picker", 39 | "hex color", 40 | "aspect ratio", 41 | "high resolution", 42 | "image filters", 43 | 44 | // Formats & Quality 45 | "HD wallpaper", 46 | "2K wallpaper", 47 | "4K resolution", 48 | "16:9 wallpaper", 49 | "9:16 wallpaper", 50 | "square wallpaper", 51 | 52 | // Descriptors 53 | "beautiful gradients", 54 | "modern gradients", 55 | "professional backgrounds", 56 | "custom design", 57 | "online tool", 58 | "free", 59 | "web-based", 60 | "browser-based", 61 | "no download required", 62 | "no installation required", 63 | "no signup required", 64 | "no login required", 65 | "no email required", 66 | "no password required", 67 | "no signup required", 68 | 69 | // Design Related 70 | "design tool", 71 | "graphic design", 72 | "web design", 73 | "UI design", 74 | "design resources", 75 | "design assets", 76 | ], 77 | authors: [{ name: "Keshav Bagaade", url: "https://keshavbagaade.com" }], 78 | creator: "Keshav Bagaade", 79 | openGraph: { 80 | type: "website", 81 | locale: "en_US", 82 | url: "https://gradii.fun", 83 | title: "Gradii - Generate Beautiful Gradients", 84 | description: 85 | "A simple gradient generator tool made by designer for designers to create stunning gradients with customizable colors, text, and effects. Use it for your designs, wallpapers, presentations, or mockups or just for fun.", 86 | siteName: "Gradii", 87 | images: ["/opengraph-image.png"], 88 | }, 89 | twitter: { 90 | card: "summary_large_image", 91 | title: "Gradii - Generate Beautiful Gradients", 92 | description: 93 | "A simple gradient generator tool made by designer for designers to create stunning gradients with customizable colors, text, and effects. Use it for your designs, wallpapers, presentations, or mockups or just for fun.", 94 | creator: "@kshvbgde", 95 | images: ["/opengraph-image.png"], 96 | }, 97 | robots: { 98 | index: true, 99 | follow: true, 100 | googleBot: { 101 | index: true, 102 | follow: true, 103 | "max-video-preview": -1, 104 | "max-image-preview": "large", 105 | "max-snippet": -1, 106 | }, 107 | }, 108 | verification: { 109 | google: "your-google-site-verification", // Add your verification code 110 | }, 111 | alternates: { 112 | canonical: "https://gradii.fun", 113 | }, 114 | category: "Design Tools", 115 | applicationName: "Gradii", 116 | manifest: "/manifest.json", 117 | appleWebApp: { 118 | capable: true, 119 | statusBarStyle: "default", 120 | themeColor: "transparent", 121 | title: "Gradii", 122 | }, 123 | formatDetection: { 124 | telephone: false, 125 | }, 126 | }; 127 | 128 | export default function RootLayout({ 129 | children, 130 | }: { 131 | children: React.ReactNode; 132 | }) { 133 | return ( 134 | 135 | 136 | 140 | 145 | 152 | 153 | 158 | 163 | 164 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 177 | 178 | 184 | {children} 185 | 186 | {/*