An animated multi-color gradient background effect with SVG elements.
Animated Bento
#001
Using only SVG circles and blur
Gradients
Installation
pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/f/animated-gradient-svg.json
Copy the Source Code
Copy and paste the following code into your project:
animated-gradient-svg.svelte
index.ts
Add Tailwind CSS
Add the following to your routes/layout.css file:
layout.css
Folder Structure
Folder Structure
Props
| Name | Type | Default | Description |
|---|---|---|---|
colors | string[] | required | List of blob colors used to generate the animated gradient field. |
speed | number | 5 | Animation duration in seconds shared by each SVG blob. |
blur | "light" | "medium" | "heavy" | "light" | Controls the blur strength applied to the full gradient layer. |
class | string | undefined | Classes merged onto the outer absolute-positioned wrapper. |