Backgrounds & Visuals
Soft Pastel Dream
Dreamy pastel gradient with soft color blobs creating a daydream aesthetic.
gradientpasteldreamsoftdaydream
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 |