Backgrounds & Visuals
Silken Mesh
Modern fluid blur with soft color gradients creating a silken texture.
blursilkmeshfluidmodern
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #f8fafc | Background color |
blurAmount | string | 80px | Blur amount |
gradientFrom | string | #bfdbfe | Gradient start color |
gradientVia | string | #c7d2fe | Gradient middle color |
gradientTo | string | #ddd6fe | Gradient end color |
gradientOpacity | number | 0.8 | Gradient opacity |
gradientScale | number[] | [1, 1.05, 1] | Gradient scale animation |
gradientDuration | number | 10 | Gradient animation duration |
blob1Color | string | #7dd3fc | First blob color |
blob1Size | string | 50% | First blob size |
blob1Opacity | number | 0.6 | First blob opacity |
blob1TranslateX | number[] | [0, 100, 0] | First blob X translation |
blob1TranslateY | number[] | [0, 50, 0] | First blob Y translation |
blob1Duration | number | 14 | First blob animation duration |
blob2Color | string | #f9a8d4 | Second blob color |
blob2Size | string | 50% | Second blob size |
blob2Opacity | number | 0.6 | Second blob opacity |
blob2TranslateX | number[] | [0, -100, 0] | Second blob X translation |
blob2TranslateY | number[] | [0, -50, 0] | Second blob Y translation |
blob2Duration | number | 16 | Second blob animation duration |
overlayColor | string | rgba(255, 255, 255, 0.4) | Overlay color |
overlayBlur | string | xl | Overlay blur |
noiseOpacity | number | 0.2 | Noise overlay opacity |
noiseBaseFrequency | string | 0.8 | Noise base frequency |
noiseOctaves | number | 3 | Noise octaves |
text | string | Silk | Text label |
textColor | string | rgba(255, 255, 255, 0.9) | Text color |
className | string | Additional CSS classes |