82:I[903690,["/chat-static/_next/static/immutable/chunks/1o6h6x663zy04.js","/chat-static/_next/static/immutable/chunks/2m82wc70tddty.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3o_do00zpb1mt.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/0zhl8lkpuievb.js","/chat-static/_next/static/immutable/chunks/300wx85v17r4x.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/0hzhjtks438-t.js","/chat-static/_next/static/immutable/chunks/1vocqkm3a_1im.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/026zgw65c3ahb.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/3srf9h7msbpj9.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/1np-j802-sgrx.js","/chat-static/_next/static/immutable/chunks/2owpwowxho3m_.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/29yrv11tyt1vu.js","/chat-static/_next/static/immutable/chunks/3sn4vx261dox0.js","/chat-static/_next/static/immutable/chunks/0nx1v2xq-1q6f.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/3cyqm8u9n5jqw.js","/chat-static/_next/static/immutable/chunks/2t6e3v_r3gzl3.js","/chat-static/_next/static/immutable/chunks/0egykxuezct38.js"],"ExplicitChatIdProvider"] 83:I[838238,["/chat-static/_next/static/immutable/chunks/1o6h6x663zy04.js","/chat-static/_next/static/immutable/chunks/2m82wc70tddty.js","/chat-static/_next/static/immutable/chunks/1lu-4z5bhhz4h.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/0wi_45vocl_-p.js","/chat-static/_next/static/immutable/chunks/3o_do00zpb1mt.js","/chat-static/_next/static/immutable/chunks/1p5y_zcqvqq8d.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/258a4ne6m_k4p.js","/chat-static/_next/static/immutable/chunks/31bw9_yzlia2t.js","/chat-static/_next/static/immutable/chunks/1nyef2mn0xr6l.js","/chat-static/_next/static/immutable/chunks/0zhl8lkpuievb.js","/chat-static/_next/static/immutable/chunks/300wx85v17r4x.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/0ewqarb2bfu8h.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/0hzhjtks438-t.js","/chat-static/_next/static/immutable/chunks/1vocqkm3a_1im.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/026zgw65c3ahb.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/3srf9h7msbpj9.js","/chat-static/_next/static/immutable/chunks/109o97wf-h9dp.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/0-vsrzeceac3v.js","/chat-static/_next/static/immutable/chunks/1np-j802-sgrx.js","/chat-static/_next/static/immutable/chunks/2owpwowxho3m_.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/0b4i3dpg7a-jn.js","/chat-static/_next/static/immutable/chunks/29yrv11tyt1vu.js","/chat-static/_next/static/immutable/chunks/3sn4vx261dox0.js","/chat-static/_next/static/immutable/chunks/0nx1v2xq-1q6f.js","/chat-static/_next/static/immutable/chunks/11jpx637g96mg.js","/chat-static/_next/static/immutable/chunks/3cyqm8u9n5jqw.js","/chat-static/_next/static/immutable/chunks/2t6e3v_r3gzl3.js","/chat-static/_next/static/immutable/chunks/0egykxuezct38.js"],"SWRDataProvider"] 84:T118a4,[V0_FILE]typescriptreact:file="gradient-backgrounds.tsx" isMerged="true" "use client" import { useState } from "react" import { Download } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" // Define 10 different gradient combinations const gradients = [ // Similar to the provided image "linear-gradient(to right, #c4f5f5, #ffefd5)", // Other pastel combinations "linear-gradient(to right, #e0f7fa, #fff8e1)", "linear-gradient(to right, #e1f5fe, #f3e5f5)", "linear-gradient(to right, #e8f5e9, #fff3e0)", "linear-gradient(to right, #f1f8e9, #e0f2f1)", "linear-gradient(to right, #f3e5f5, #e8eaf6)", "linear-gradient(to right, #e8eaf6, #e0f7fa)", "linear-gradient(to right, #ffebee, #e8f5e9)", "linear-gradient(to right, #e0f2f1, #ede7f6)", "linear-gradient(to right, #fce4ec, #f1f8e9)", ] export default function GradientBackgrounds() { const [selectedGradient, setSelectedGradient] = useState(null) // Function to download the gradient as a PNG const downloadGradient = (index: number) => { const canvas = document.createElement("canvas") canvas.width = 1200 canvas.height = 800 const ctx = canvas.getContext("2d") if (ctx) { // Create a gradient on the canvas const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0) // Extract colors from the gradient string const gradientStr = gradients[index] const colors = gradientStr.match(/#[a-f0-9]{6}/gi) if (colors && colors.length >= 2) { gradient.addColorStop(0, colors[0]) gradient.addColorStop(1, colors[1]) ctx.fillStyle = gradient ctx.fillRect(0, 0, canvas.width, canvas.height) // Convert canvas to blob and download canvas.toBlob((blob) => { if (blob) { const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `gradient-${index + 1}.png` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } }, "image/png") } } } return (

10 Pastel Gradient Backgrounds

Click on any gradient to see it in full size. Click the download button to save it as a PNG.

{gradients.map((gradient, index) => ( setSelectedGradient(index)} >

Gradient {index + 1}

))}

{selectedGradient !== null && (

setSelectedGradient(null)} >

e.stopPropagation()}>

)}

) } [V0_FILE]typescriptreact:file="diagonal-stripe-gradients.tsx" isMerged="true" "use client" import { useState } from "react" import { Download } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" // Define 10 different gradient combinations with a white diagonal stripe const diagonalStripeGradients = [ { name: "Aqua Sunrise", background: "linear-gradient(135deg, #c4f5f5 0%, #c4f5f5 42%, white 45%, white 55%, #ffefd5 58%, #ffefd5 100%)", }, { name: "Lavender Mist", background: "linear-gradient(135deg, #e6e6fa 0%, #e6e6fa 42%, white 45%, white 55%, #ffdab9 58%, #ffdab9 100%)", }, { name: "Mint Lemonade", background: "linear-gradient(135deg, #98fb98 0%, #98fb98 42%, white 45%, white 55%, #fffacd 58%, #fffacd 100%)", }, { name: "Sky Blossom", background: "linear-gradient(135deg, #87ceeb 0%, #87ceeb 42%, white 45%, white 55%, #ffb6c1 58%, #ffb6c1 100%)", }, { name: "Peach Cream", background: "linear-gradient(135deg, #ffdab9 0%, #ffdab9 42%, white 45%, white 55%, #e0ffff 58%, #e0ffff 100%)", }, { name: "Lilac Haze", background: "linear-gradient(135deg, #dcd0ff 0%, #dcd0ff 42%, white 45%, white 55%, #ffefd5 58%, #ffefd5 100%)", }, { name: "Coral Mist", background: "linear-gradient(135deg, #f08080 0%, #f08080 42%, white 45%, white 55%, #e0ffff 58%, #e0ffff 100%)", }, { name: "Sage Linen", background: "linear-gradient(135deg, #d0f0c0 0%, #d0f0c0 42%, white 45%, white 55%, #faf0e6 58%, #faf0e6 100%)", }, { name: "Blueberry Cream", background: "linear-gradient(135deg, #add8e6 0%, #add8e6 42%, white 45%, white 55%, #fff8dc 58%, #fff8dc 100%)", }, { name: "Rose Mist", background: "linear-gradient(135deg, #ffb6c1 0%, #ffb6c1 42%, white 45%, white 55%, #f0f8ff 58%, #f0f8ff 100%)", }, ] export default function DiagonalStripeGradients() { const [selectedGradient, setSelectedGradient] = useState(null) // Function to download the gradient as a PNG const downloadGradient = (index: number) => { const canvas = document.createElement("canvas") canvas.width = 1200 canvas.height = 800 const ctx = canvas.getContext("2d") if (ctx) { // Create a temporary div with the gradient to capture it const tempDiv = document.createElement("div") tempDiv.style.width = `${canvas.width}px` tempDiv.style.height = `${canvas.height}px` tempDiv.style.background = diagonalStripeGradients[index].background document.body.appendChild(tempDiv) // Use html2canvas to capture the gradient (simulated here) const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // Convert canvas to blob and download canvas.toBlob((blob) => { if (blob) { const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `diagonal-gradient-${index + 1}.png` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } }, "image/png") } // For demonstration, we'll use a placeholder img.src = "/placeholder.svg?height=800&width=1200" // Clean up document.body.removeChild(tempDiv) } } return (

10 Diagonal Stripe Gradients

Each gradient features a 45° white stripe across the center. Click on any gradient to see it in full size.

{diagonalStripeGradients.map((gradient, index) => ( setSelectedGradient(index)} >

{gradient.name}

))}

{selectedGradient !== null && (

setSelectedGradient(null)} >

e.stopPropagation()}>

)}

) } [V0_FILE]typescriptreact:file="diagonal-stripe-generator.tsx" isMerged="true" "use client" import { useState } from "react" import { Download, RefreshCw } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Slider } from "@/components/ui/slider" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" export default function DiagonalStripeGenerator() { const [color1, setColor1] = useState("#c4f5f5") const [color2, setColor2] = useState("#ffefd5") const [stripeWidth, setStripeWidth] = useState(10) const [angle, setAngle] = useState(135) // Generate the gradient CSS const generateGradientCSS = () => { return `linear-gradient(${angle}deg, ${color1} 0%, ${color1} ${50 - stripeWidth / 2}%, white ${50 - stripeWidth / 2}%, white ${50 + stripeWidth / 2}%, ${color2} ${50 + stripeWidth / 2}%, ${color2} 100%)` } const gradientCSS = generateGradientCSS() // Function to download the gradient as a PNG const downloadGradient = () => { const canvas = document.createElement("canvas") canvas.width = 1200 canvas.height = 800 const ctx = canvas.getContext("2d") if (ctx) { // Create a temporary div with the gradient to capture it const tempDiv = document.createElement("div") tempDiv.style.width = `${canvas.width}px` tempDiv.style.height = `${canvas.height}px` tempDiv.style.background = gradientCSS document.body.appendChild(tempDiv) // Use html2canvas to capture the gradient (simulated here) const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // Convert canvas to blob and download canvas.toBlob((blob) => { if (blob) { const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `custom-diagonal-gradient.png` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } }, "image/png") } // For demonstration, we'll use a placeholder img.src = "/placeholder.svg?height=800&width=1200" // Clean up document.body.removeChild(tempDiv) } } // Generate random colors const generateRandomColors = () => { const randomColor = () => { const letters = "0123456789ABCDEF" let color = "#" for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)] } return color } setColor1(randomColor()) setColor2(randomColor()) } return (

Custom Diagonal Stripe Generator

Create your own diagonal stripe gradient by adjusting the colors and settings below.

Gradient Settings

First Color

setColor1(e.target.value)} className="w-12 h-10 p-1" /> setColor1(e.target.value)} />

Second Color

setColor2(e.target.value)} className="w-12 h-10 p-1" /> setColor2(e.target.value)} />

Stripe Width: {stripeWidth}% setStripeWidth(value[0])} />

Angle: {angle}° setAngle(value[0])} />

CSS Code:

{gradientCSS}

Preview

) } [V0_FILE]typescriptreact:file="blurred-diagonal-gradients.tsx" isMerged="true" "use client" import { useState } from "react" import { Download } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" // Define 10 different gradient combinations with a blurred white diagonal stripe const blurredDiagonalGradients = [ { name: "Aqua Sunrise Blur", background: "linear-gradient(135deg, #c4f5f5 0%, #c4f5f5 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #ffefd5 70%, #ffefd5 100%)", }, { name: "Lavender Mist Blur", background: "linear-gradient(135deg, #e6e6fa 0%, #e6e6fa 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #ffdab9 70%, #ffdab9 100%)", }, { name: "Mint Lemonade Blur", background: "linear-gradient(135deg, #98fb98 0%, #98fb98 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #fffacd 70%, #fffacd 100%)", }, { name: "Sky Blossom Blur", background: "linear-gradient(135deg, #87ceeb 0%, #87ceeb 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #ffb6c1 70%, #ffb6c1 100%)", }, { name: "Peach Cream Blur", background: "linear-gradient(135deg, #ffdab9 0%, #ffdab9 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #e0ffff 70%, #e0ffff 100%)", }, { name: "Lilac Haze Blur", background: "linear-gradient(135deg, #dcd0ff 0%, #dcd0ff 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #ffefd5 70%, #ffefd5 100%)", }, { name: "Coral Mist Blur", background: "linear-gradient(135deg, #f08080 0%, #f08080 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #e0ffff 70%, #e0ffff 100%)", }, { name: "Sage Linen Blur", background: "linear-gradient(135deg, #d0f0c0 0%, #d0f0c0 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #faf0e6 70%, #faf0e6 100%)", }, { name: "Blueberry Cream Blur", background: "linear-gradient(135deg, #add8e6 0%, #add8e6 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #fff8dc 70%, #fff8dc 100%)", }, { name: "Rose Mist Blur", background: "linear-gradient(135deg, #ffb6c1 0%, #ffb6c1 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #f0f8ff 70%, #f0f8ff 100%)", }, ] export default function BlurredDiagonalGradients() { const [selectedGradient, setSelectedGradient] = useState(null) // Function to download the gradient as a PNG const downloadGradient = (index: number) => { const canvas = document.createElement("canvas") canvas.width = 1200 canvas.height = 800 const ctx = canvas.getContext("2d") if (ctx) { // Create a temporary div with the gradient to capture it const tempDiv = document.createElement("div") tempDiv.style.width = `${canvas.width}px` tempDiv.style.height = `${canvas.height}px` tempDiv.style.background = blurredDiagonalGradients[index].background document.body.appendChild(tempDiv) // Use html2canvas to capture the gradient (simulated here) const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // Convert canvas to blob and download canvas.toBlob((blob) => { if (blob) { const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `blurred-diagonal-gradient-${index + 1}.png` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } }, "image/png") } // For demonstration, we'll use a placeholder img.src = "/placeholder.svg?height=800&width=1200" // Clean up document.body.removeChild(tempDiv) } } return (

10 Blurred Diagonal Gradients

Each gradient features a maximally blurred 45° white stripe across the center.

{blurredDiagonalGradients.map((gradient, index) => ( setSelectedGradient(index)} >

{gradient.name}

))}

{selectedGradient !== null && (

setSelectedGradient(null)} >

e.stopPropagation()}>

)}

) } [V0_FILE]typescriptreact:file="blurred-stripe-generator.tsx" isMerged="true" "use client" import { useState } from "react" import { Download, RefreshCw } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Slider } from "@/components/ui/slider" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" export default function BlurredStripeGenerator() { const [color1, setColor1] = useState("#c4f5f5") const [color2, setColor2] = useState("#ffefd5") const [blurAmount, setBlurAmount] = useState(20) const [angle, setAngle] = useState(135) const [stripeWidth, setStripeWidth] = useState(10) // Generate the gradient CSS with maximum blur const generateGradientCSS = () => { // Calculate positions based on blur amount and stripe width const startFade = 50 - stripeWidth / 2 - blurAmount const startWhite = 50 - stripeWidth / 2 const endWhite = 50 + stripeWidth / 2 const endFade = 50 + stripeWidth / 2 + blurAmount return `linear-gradient(${angle}deg, ${color1} 0%, ${color1} ${startFade}%, rgba(255,255,255,0.3) ${startWhite}%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) ${endWhite}%, ${color2} ${endFade}%, ${color2} 100%)` } const gradientCSS = generateGradientCSS() // Function to download the gradient as a PNG const downloadGradient = () => { const canvas = document.createElement("canvas") canvas.width = 1200 canvas.height = 800 const ctx = canvas.getContext("2d") if (ctx) { // Create a temporary div with the gradient to capture it const tempDiv = document.createElement("div") tempDiv.style.width = `${canvas.width}px` tempDiv.style.height = `${canvas.height}px` tempDiv.style.background = gradientCSS document.body.appendChild(tempDiv) // Use html2canvas to capture the gradient (simulated here) const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // Convert canvas to blob and download canvas.toBlob((blob) => { if (blob) { const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `custom-blurred-gradient.png` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } }, "image/png") } // For demonstration, we'll use a placeholder img.src = "/placeholder.svg?height=800&width=1200" // Clean up document.body.removeChild(tempDiv) } } // Generate random colors const generateRandomColors = () => { const randomColor = () => { const letters = "0123456789ABCDEF" let color = "#" for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)] } return color } setColor1(randomColor()) setColor2(randomColor()) } return (

Custom Blurred Stripe Generator

Create your own maximally blurred diagonal stripe gradient by adjusting the settings below.

Gradient Settings

First Color

setColor1(e.target.value)} className="w-12 h-10 p-1" /> setColor1(e.target.value)} />

Second Color

setColor2(e.target.value)} className="w-12 h-10 p-1" /> setColor2(e.target.value)} />

Stripe Width: {stripeWidth}% setStripeWidth(value[0])} />

Blur Amount: {blurAmount}% setBlurAmount(value[0])} />

Angle: {angle}° setAngle(value[0])} />

CSS Code:

{gradientCSS.replace(/\s+/g, " ")}

Preview

) } [V0_FILE]typescriptreact:file="circle-featured-gradients.tsx" isMerged="true" "use client" import { useState } from "react" import { Download } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" // Define 10 different gradient combinations with blurred diagonal stripes and circles const circleGradients = [ { name: "Aqua Bubbles", background: "linear-gradient(135deg, #c4f5f5 0%, #c4f5f5 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #ffefd5 70%, #ffefd5 100%)", circles: [ { size: 150, x: 15, y: 20, color: "radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%)" }, { size: 200, x: 70, y: 60, color: "radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 70%)" }, { size: 100, x: 40, y: 80, color: "radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%)" }, ], }, { name: "Lavender Orbs", background: "linear-gradient(135deg, #e6e6fa 0%, #e6e6fa 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #ffdab9 70%, #ffdab9 100%)", circles: [ { size: 180, x: 20, y: 30, color: "radial-gradient(circle, rgba(230,230,250,0.9) 0%, rgba(230,230,250,0) 70%)" }, { size: 120, x: 65, y: 20, color: "radial-gradient(circle, rgba(255,218,185,0.8) 0%, rgba(255,218,185,0) 70%)" }, { size: 150, x: 50, y: 70, color: "radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%)" }, ], }, { name: "Mint Spheres", background: "linear-gradient(135deg, #98fb98 0%, #98fb98 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #fffacd 70%, #fffacd 100%)", circles: [ { size: 200, x: 10, y: 40, color: "radial-gradient(circle, rgba(152,251,152,0.8) 0%, rgba(152,251,152,0) 70%)" }, { size: 150, x: 60, y: 30, color: "radial-gradient(circle, rgba(255,250,205,0.7) 0%, rgba(255,250,205,0) 70%)" }, { size: 120, x: 30, y: 70, color: "radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%)" }, ], }, { name: "Sky Circles", background: "linear-gradient(135deg, #87ceeb 0%, #87ceeb 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #ffb6c1 70%, #ffb6c1 100%)", circles: [ { size: 170, x: 25, y: 20, color: "radial-gradient(circle, rgba(135,206,235,0.9) 0%, rgba(135,206,235,0) 70%)" }, { size: 130, x: 70, y: 40, color: "radial-gradient(circle, rgba(255,182,193,0.8) 0%, rgba(255,182,193,0) 70%)" }, { size: 180, x: 40, y: 75, color: "radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%)" }, ], }, { name: "Peach Bubbles", background: "linear-gradient(135deg, #ffdab9 0%, #ffdab9 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #e0ffff 70%, #e0ffff 100%)", circles: [ { size: 160, x: 15, y: 30, color: "radial-gradient(circle, rgba(255,218,185,0.8) 0%, rgba(255,218,185,0) 70%)" }, { size: 190, x: 60, y: 20, color: "radial-gradient(circle, rgba(224,255,255,0.7) 0%, rgba(224,255,255,0) 70%)" }, { size: 140, x: 35, y: 65, color: "radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%)" }, ], }, { name: "Lilac Globes", background: "linear-gradient(135deg, #dcd0ff 0%, #dcd0ff 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #ffefd5 70%, #ffefd5 100%)", circles: [ { size: 200, x: 20, y: 25, color: "radial-gradient(circle, rgba(220,208,255,0.9) 0%, rgba(220,208,255,0) 70%)" }, { size: 150, x: 65, y: 35, color: "radial-gradient(circle, rgba(255,239,213,0.8) 0%, rgba(255,239,213,0) 70%)" }, { size: 120, x: 45, y: 70, color: "radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%)" }, ], }, { name: "Coral Spheres", background: "linear-gradient(135deg, #f08080 0%, #f08080 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #e0ffff 70%, #e0ffff 100%)", circles: [ { size: 180, x: 10, y: 20, color: "radial-gradient(circle, rgba(240,128,128,0.8) 0%, rgba(240,128,128,0) 70%)" }, { size: 140, x: 60, y: 30, color: "radial-gradient(circle, rgba(224,255,255,0.7) 0%, rgba(224,255,255,0) 70%)" }, { size: 160, x: 35, y: 75, color: "radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%)" }, ], }, { name: "Sage Bubbles", background: "linear-gradient(135deg, #d0f0c0 0%, #d0f0c0 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #faf0e6 70%, #faf0e6 100%)", circles: [ { size: 170, x: 25, y: 15, color: "radial-gradient(circle, rgba(208,240,192,0.9) 0%, rgba(208,240,192,0) 70%)" }, { size: 130, x: 70, y: 25, color: "radial-gradient(circle, rgba(250,240,230,0.8) 0%, rgba(250,240,230,0) 70%)" }, { size: 190, x: 40, y: 65, color: "radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%)" }, ], }, { name: "Blueberry Orbs", background: "linear-gradient(135deg, #add8e6 0%, #add8e6 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #fff8dc 70%, #fff8dc 100%)", circles: [ { size: 160, x: 15, y: 25, color: "radial-gradient(circle, rgba(173,216,230,0.8) 0%, rgba(173,216,230,0) 70%)" }, { size: 200, x: 65, y: 35, color: "radial-gradient(circle, rgba(255,248,220,0.7) 0%, rgba(255,248,220,0) 70%)" }, { size: 140, x: 30, y: 70, color: "radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%)" }, ], }, { name: "Rose Bubbles", background: "linear-gradient(135deg, #ffb6c1 0%, #ffb6c1 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #f0f8ff 70%, #f0f8ff 100%)", circles: [ { size: 180, x: 20, y: 20, color: "radial-gradient(circle, rgba(255,182,193,0.9) 0%, rgba(255,182,193,0) 70%)" }, { size: 150, x: 70, y: 30, color: "radial-gradient(circle, rgba(240,248,255,0.8) 0%, rgba(240,248,255,0) 70%)" }, { size: 120, x: 45, y: 75, color: "radial-gradient(circle, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 70%)" }, ], }, ] export default function CircleFeaturedGradients() { const [selectedGradient, setSelectedGradient] = useState(null) // Function to download the gradient as a PNG const downloadGradient = (index: number) => { const canvas = document.createElement("canvas") canvas.width = 1200 canvas.height = 800 const ctx = canvas.getContext("2d") if (ctx) { // Create a temporary div with the gradient to capture it const tempDiv = document.createElement("div") tempDiv.style.width = `${canvas.width}px` tempDiv.style.height = `${canvas.height}px` tempDiv.style.background = circleGradients[index].background tempDiv.style.position = "relative" document.body.appendChild(tempDiv) // Add circles to the div circleGradients[index].circles.forEach((circle) => { const circleDiv = document.createElement("div") circleDiv.style.position = "absolute" circleDiv.style.width = `${circle.size * (canvas.width / 100)}px` circleDiv.style.height = `${circle.size * (canvas.width / 100)}px` circleDiv.style.left = `${circle.x}%` circleDiv.style.top = `${circle.y}%` circleDiv.style.background = circle.color circleDiv.style.borderRadius = "50%" tempDiv.appendChild(circleDiv) }) // Use html2canvas to capture the gradient (simulated here) const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // Convert canvas to blob and download canvas.toBlob((blob) => { if (blob) { const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `circle-gradient-${index + 1}.png` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } }, "image/png") } // For demonstration, we'll use a placeholder img.src = "/placeholder.svg?height=800&width=1200" // Clean up document.body.removeChild(tempDiv) } } return (

10 Circle Featured Gradients

Each gradient features a blurred diagonal stripe with decorative circular elements.

{circleGradients.map((gradient, index) => ( setSelectedGradient(index)} >

{gradient.circles.map((circle, circleIndex) => (

))}

{gradient.name}

))}

{selectedGradient !== null && (

setSelectedGradient(null)} >

e.stopPropagation()}>

{circleGradients[selectedGradient].circles.map((circle, circleIndex) => (

))}

)}

) } [V0_FILE]typescriptreact:file="circle-gradient-generator.tsx" isMerged="true" "use client" import { useState } from "react" import { Download, RefreshCw, Plus, Trash2 } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Slider } from "@/components/ui/slider" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" type Circle = { size: number x: number y: number opacity: number } export default function CircleGradientGenerator() { const [color1, setColor1] = useState("#c4f5f5") const [color2, setColor2] = useState("#ffefd5") const [blurAmount, setBlurAmount] = useState(20) const [angle, setAngle] = useState(135) const [stripeWidth, setStripeWidth] = useState(10) const [circles, setCircles] = useState([ { size: 150, x: 20, y: 20, opacity: 0.8 }, { size: 200, x: 70, y: 60, opacity: 0.6 }, { size: 100, x: 40, y: 80, opacity: 0.7 }, ]) // Generate the gradient CSS with maximum blur const generateGradientCSS = () => { // Calculate positions based on blur amount and stripe width const startFade = 50 - stripeWidth / 2 - blurAmount const startWhite = 50 - stripeWidth / 2 const endWhite = 50 + stripeWidth / 2 const endFade = 50 + stripeWidth / 2 + blurAmount return `linear-gradient(${angle}deg, ${color1} 0%, ${color1} ${startFade}%, rgba(255,255,255,0.3) ${startWhite}%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) ${endWhite}%, ${color2} ${endFade}%, ${color2} 100%)` } const gradientCSS = generateGradientCSS() // Function to add a new circle const addCircle = () => { setCircles([ ...circles, { size: 150, x: Math.floor(Math.random() * 80) + 10, y: Math.floor(Math.random() * 80) + 10, opacity: 0.7, }, ]) } // Function to remove a circle const removeCircle = (index: number) => { setCircles(circles.filter((_, i) => i !== index)) } // Function to update a circle property const updateCircle = (index: number, property: keyof Circle, value: number) => { const updatedCircles = [...circles] updatedCircles[index][property] = value setCircles(updatedCircles) } // Function to download the gradient as a PNG const downloadGradient = () => { const canvas = document.createElement("canvas") canvas.width = 1200 canvas.height = 800 const ctx = canvas.getContext("2d") if (ctx) { // Create a temporary div with the gradient to capture it const tempDiv = document.createElement("div") tempDiv.style.width = `${canvas.width}px` tempDiv.style.height = `${canvas.height}px` tempDiv.style.background = gradientCSS tempDiv.style.position = "relative" document.body.appendChild(tempDiv) // Add circles to the div circles.forEach((circle) => { const circleDiv = document.createElement("div") circleDiv.style.position = "absolute" circleDiv.style.width = `${circle.size * (canvas.width / 100)}px` circleDiv.style.height = `${circle.size * (canvas.width / 100)}px` circleDiv.style.left = `${circle.x}%` circleDiv.style.top = `${circle.y}%` circleDiv.style.background = `radial-gradient(circle, rgba(255,255,255,${circle.opacity}) 0%, rgba(255,255,255,0) 70%)` circleDiv.style.borderRadius = "50%" tempDiv.appendChild(circleDiv) }) // Use html2canvas to capture the gradient (simulated here) const img = new Image() img.crossOrigin = "anonymous" img.onload = () => { ctx.drawImage(img, 0, 0, canvas.width, canvas.height) // Convert canvas to blob and download canvas.toBlob((blob) => { if (blob) { const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = `custom-circle-gradient.png` document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } }, "image/png") } // For demonstration, we'll use a placeholder img.src = "/placeholder.svg?height=800&width=1200" // Clean up document.body.removeChild(tempDiv) } } // Generate random colors const generateRandomColors = () => { const randomColor = () => { const letters = "0123456789ABCDEF" let color = "#" for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)] } return color } setColor1(randomColor()) setColor2(randomColor()) } return (

Circle Featured Gradient Generator

Create your own gradient with blurred diagonal stripe and decorative circles.

Gradient Settings Circle Settings

Gradient Settings

First Color

setColor1(e.target.value)} className="w-12 h-10 p-1" /> setColor1(e.target.value)} />

Second Color

setColor2(e.target.value)} className="w-12 h-10 p-1" /> setColor2(e.target.value)} />

Stripe Width: {stripeWidth}% setStripeWidth(value[0])} />

Blur Amount: {blurAmount}% setBlurAmount(value[0])} />

Angle: {angle}° setAngle(value[0])} />

Circle Settings

{circles.map((circle, index) => (

Circle {index + 1}

Size: {circle.size}px updateCircle(index, "size", value[0])} />

X Position: {circle.x}% updateCircle(index, "x", value[0])} />

Y Position: {circle.y}% updateCircle(index, "y", value[0])} />

Opacity: {circle.opacity.toFixed(1)} updateCircle(index, "opacity", value[0] / 10)} />

))}

Preview

{circles.map((circle, index) => (

))}

) } [V0_FILE]typescriptreact:file="colored-circle-gradients.tsx" "use client" import { useState } from "react" import { Copy, RefreshCw, Plus, Trash2, Check } from "lucide-react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Slider } from "@/components/ui/slider" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Textarea } from "@/components/ui/textarea" type Circle = { size: number x: number y: number color: string blur: number } // Predefined gradient backgrounds with colored blurred circles const presetGradients = [ { name: "Aqua Sunrise", background: "linear-gradient(135deg, #c4f5f5 0%, #c4f5f5 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #ffefd5 70%, #ffefd5 100%)", circles: [ { size: 150, x: 15, y: 20, color: "#7fdbff", blur: 40 }, { size: 200, x: 70, y: 60, color: "#ffdc73", blur: 60 }, { size: 100, x: 40, y: 80, color: "#ff9eb5", blur: 30 }, ], }, { name: "Lavender Dreams", background: "linear-gradient(135deg, #e6e6fa 0%, #e6e6fa 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #ffdab9 70%, #ffdab9 100%)", circles: [ { size: 180, x: 20, y: 30, color: "#b19cd9", blur: 50 }, { size: 120, x: 65, y: 20, color: "#ffb347", blur: 40 }, { size: 150, x: 50, y: 70, color: "#ff6b6b", blur: 45 }, ], }, { name: "Mint Breeze", background: "linear-gradient(135deg, #98fb98 0%, #98fb98 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #fffacd 70%, #fffacd 100%)", circles: [ { size: 200, x: 10, y: 40, color: "#00d084", blur: 60 }, { size: 150, x: 60, y: 30, color: "#fcf6bd", blur: 45 }, { size: 120, x: 30, y: 70, color: "#a0ced9", blur: 35 }, ], }, { name: "Ocean Sunset", background: "linear-gradient(135deg, #87ceeb 0%, #87ceeb 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #ffb6c1 70%, #ffb6c1 100%)", circles: [ { size: 170, x: 25, y: 20, color: "#0099ff", blur: 50 }, { size: 130, x: 70, y: 40, color: "#ff6b6b", blur: 40 }, { size: 180, x: 40, y: 75, color: "#ffd166", blur: 55 }, ], }, { name: "Peach Glow", background: "linear-gradient(135deg, #ffdab9 0%, #ffdab9 30%, rgba(255,255,255,0.3) 40%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) 60%, #e0ffff 70%, #e0ffff 100%)", circles: [ { size: 160, x: 15, y: 30, color: "#ff9a8b", blur: 45 }, { size: 190, x: 60, y: 20, color: "#98d8c8", blur: 55 }, { size: 140, x: 35, y: 65, color: "#ffb347", blur: 40 }, ], }, ] export default function ColoredCircleGradients() { const [color1, setColor1] = useState("#c4f5f5") const [color2, setColor2] = useState("#ffefd5") const [blurAmount, setBlurAmount] = useState(20) const [angle, setAngle] = useState(135) const [stripeWidth, setStripeWidth] = useState(10) const [circles, setCircles] = useState([ { size: 150, x: 20, y: 20, color: "#7fdbff", blur: 40 }, { size: 200, x: 70, y: 60, color: "#ffdc73", blur: 60 }, { size: 100, x: 40, y: 80, color: "#ff9eb5", blur: 30 }, ]) const [copied, setCopied] = useState(false) const [selectedPreset, setSelectedPreset] = useState(null) // Generate the gradient CSS with maximum blur const generateGradientCSS = () => { // Calculate positions based on blur amount and stripe width const startFade = 50 - stripeWidth / 2 - blurAmount const startWhite = 50 - stripeWidth / 2 const endWhite = 50 + stripeWidth / 2 const endFade = 50 + stripeWidth / 2 + blurAmount return `linear-gradient(${angle}deg, ${color1} 0%, ${color1} ${startFade}%, rgba(255,255,255,0.3) ${startWhite}%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.3) ${endWhite}%, ${color2} ${endFade}%, ${color2} 100%)` } const gradientCSS = generateGradientCSS() // Function to add a new circle const addCircle = () => { // Generate a random color const randomColor = () => { const letters = "0123456789ABCDEF" let color = "#" for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)] } return color } setCircles([ ...circles, { size: 150, x: Math.floor(Math.random() * 80) + 10, y: Math.floor(Math.random() * 80) + 10, color: randomColor(), blur: 40, }, ]) } // Function to remove a circle const removeCircle = (index: number) => { setCircles(circles.filter((_, i) => i !== index)) } // Function to update a circle property const updateCircle = (index: number, property: keyof Circle, value: any) => { const updatedCircles = [...circles] updatedCircles[index][property] = value setCircles(updatedCircles) } // Generate random colors const generateRandomColors = () => { const randomColor = () => { const letters = "0123456789ABCDEF" let color = "#" for (let i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)] } return color } setColor1(randomColor()) setColor2(randomColor()) // Also randomize circle colors const updatedCircles = circles.map((circle) => ({ ...circle, color: randomColor(), })) setCircles(updatedCircles) } // Load a preset gradient const loadPreset = (index: number) => { const preset = presetGradients[index] setSelectedPreset(index) // Extract colors from the gradient string const bgColors = preset.background.match(/#[a-f0-9]{6}/gi) if (bgColors && bgColors.length >= 2) { setColor1(bgColors[0]) setColor2(bgColors[1]) } setCircles([...preset.circles]) } // Generate the complete CSS for the gradient with circles const generateCompleteCSS = () => { let css = `.gradient-background { position: relative; width: 100%; height: 100%; background: ${gradientCSS.replace(/\s+/g, " ")}; overflow: hidden; }\n` circles.forEach((circle, index) => { css += ` .circle-${index + 1} { position: absolute; width: ${circle.size}px; height: ${circle.size}px; left: ${circle.x}%; top: ${circle.y}%; transform: translate(-50%, -50%); border-radius: 50%; background-color: ${circle.color}; filter: blur(${circle.blur}px); opacity: 0.7; }\n` }) return css } // Generate the HTML structure const generateHTML = () => { let html = `

\n` circles.forEach((_, index) => { html += `

\n` }) html += `

` return html } // Copy CSS to clipboard const copyCSS = () => { const css = generateCompleteCSS() navigator.clipboard.writeText(css).then(() => { setCopied(true) setTimeout(() => setCopied(false), 2000) }) } return (

Colored Circle Gradients

Create gradients with blurred diagonal stripes and colored blurred circles.

{presetGradients.map((preset, index) => ( loadPreset(index)} >

{preset.circles.map((circle, circleIndex) => (

))}

{preset.name}

))}

Gradient Settings Circle Settings

Gradient Settings

First Color

setColor1(e.target.value)} className="w-12 h-10 p-1" /> setColor1(e.target.value)} />

Second Color

setColor2(e.target.value)} className="w-12 h-10 p-1" /> setColor2(e.target.value)} />

Stripe Width: {stripeWidth}% setStripeWidth(value[0])} />

Blur Amount: {blurAmount}% setBlurAmount(value[0])} />

Angle: {angle}° setAngle(value[0])} />

Circle Settings

{circles.map((circle, index) => (

Circle {index + 1}

Size: {circle.size}px updateCircle(index, "size", value[0])} />

X Position: {circle.x}% updateCircle(index, "x", value[0])} />

Y Position: {circle.y}% updateCircle(index, "y", value[0])} />

Color

updateCircle(index, "color", e.target.value)} className="w-12 h-10 p-1" /> updateCircle(index, "color", e.target.value)} />

Blur: {circle.blur}px updateCircle(index, "blur", value[0])} />

))}

Preview

{circles.map((circle, index) => (

))}

CSS Code


            <div className="mt-4">
              <h4 className="font-medium mb-2">HTML Structure</h4>
              <Textarea className="font-mono text-sm h-[100px] resize-none" readOnly value={generateHTML()} />
            </div>
          </Card>
        </div>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="index.tsx"
import ColoredCircleGradients from "./colored-circle-gradients"

export default function GradientPage() {
  return <ColoredCircleGradients />
}
7b:["$","$L82",null,{"chatId":"HZMgVXcVLtO","children":["$","$L83",null,{"data":{"@\"active-block\",\"HZMgVXcVLtO\",":{"id":"b_hqC9TLVq7j2","messageId":"eBDbwIuMN82QAtgF6KLzVRtRhYuid0r8","source":"$84","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"gradient-backgrounds","type":"code-project","project":"gradient-backgrounds"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"HZMgVXcVLtO\",":false,"":null},"children":"$L85"}]}]
</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This