Liquid Gradient
A premium fluid simulation with deep burgundy and magenta tones, featuring a yellowish-white shine and high-detail noise.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| color1 | string | #220011 | Base Dark (e.g., Deep Burgundy) |
| color2 | string | #990055 | Mid Tone (e.g., Vibrant Magenta) |
| color3 | string | #fff4d0 | Highlight (e.g., Yellowish White) |
| speed | number | 0.8 | Animation speed |
| reflection | number | 0.6 | How shiny the highlights are |
When to Use
Use this component for hero sections or full-page backgrounds where you want a deep, atmospheric, and highly 'liquid' feel that reacts subtly to mouse movement.
Best Practices
Pair with high-contrast, bold typography. The deep color shifts work best as a backdrop for minimal content that needs to feel premium and moody.
Why This Component Matters
Standard CSS-only gradients often lack the depth and organic feel of real-world fluid dynamics. This component uses GLSL shaders to provide high-performance, complex motion that elevates the visual quality of any modern web interface.
FAQ
QCan I use different colors?
Yes, you can pass any hex color to `color1`, `color2`, and `color3` to completely transform the mood from dark burgundy to any other palette.
QIs it performance-heavy?
The component uses WebGL via the OGL library, which is extremely lightweight and efficient, ensuring smooth 60fps animations even on mobile devices.
QDoes it support mouse interaction?
Yes, it has a built-in mouse lag/follow effect that subtly distorts the liquid based on the cursor position.
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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.