Soft Pastel Dream
Dreamy pastel gradient with soft color blobs creating a daydream aesthetic.
Main Features of Soft Pastel Dream
How to Use Soft Pastel Dream in Next.js
Installation Guide for Soft Pastel Dream
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #fdf2f8 | Background color |
blob1Color | string | #fbcfe8 | First blob color |
blob1Size | string | 600px | First blob size |
blob1Blur | string | 80px | First blob blur |
blob1Opacity | number | 0.7 | First blob opacity |
blob1Position | string | -top-20 -left-20 | First blob position |
blob1Scale | number[] | [1, 1.1, 1] | First blob scale animation |
blob1TranslateX | number[] | [0, 50, 0] | First blob X translation |
blob1Duration | number | 15 | First blob animation duration |
blob2Color | string | #c4b5fd | Second blob color |
blob2Size | string | 500px | Second blob size |
blob2Blur | string | 80px | Second blob blur |
blob2Opacity | number | 0.7 | Second blob opacity |
blob2Position | string | top-1/2 right-[-100px] | Second blob position |
blob2Scale | number[] | [1, 1.2, 1] | Second blob scale animation |
blob2TranslateY | number[] | [0, -50, 0] | Second blob Y translation |
blob2Duration | number | 12 | Second blob animation duration |
blob3Color | string | #bfdbfe | Third blob color |
blob3Size | string | 600px | Third blob size |
blob3Blur | string | 80px | Third blob blur |
blob3Opacity | number | 0.7 | Third blob opacity |
blob3Position | string | -bottom-40 left-1/3 | Third blob position |
blob3Scale | number[] | [1, 1.1, 1] | Third blob scale animation |
blob3TranslateX | number[] | [0, -30, 0] | Third blob X translation |
blob3Duration | number | 18 | Third blob animation duration |
overlayColor | string | rgba(255, 255, 255, 0.3) | Overlay color |
overlayBlur | string | 3xl | Overlay blur |
textureUrl | string | https://www.transparenttextures.com/patterns/cubes.png | Texture image URL |
textureOpacity | number | 0.03 | Texture opacity |
title | string | Daydream | Title text |
className | string | Additional CSS classes |
Related Components
Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QWhat is the 'texture'?
It includes an optional paper/cube pattern overlay to give the soft gradients a more tactile, physical feel.
QCan I adjust the blob speed?
Yes, each blob has an independent duration prop to ensure the movement feels organic and non-repetitive.
QDoes it work as a full-page background?
Absolutely, its soft colors and slow animations make it one of the less distracting choices for long-scrolling pages.