Uilora Gradient Background
4-color organic gradient with domain warping and soft CSS-enhanced blurring for ultimate smoothness.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ['#4f46e5', '#7c3aed', '#2563eb', '#db2777'] | 4 Hex colors for the blend |
| speed | number | 0.5 | Animation speed |
| intensity | number | 0.4 | Distortion intensity |
| interactive | boolean | true | Follows mouse movement |
When to Use
Universal background for landing pages, signup forms, and any section that needs a modern, vibrant pop of color.
Best Practices
Choose colors that are close on the spectrum (e.g., blues and purples) for a calm look, or contrasting colors for high energy.
Why This Component Matters
Static gradients feel dead. Adding domain warping and interactive pull brings life to the most basic element of UI design.
FAQ
QWhy is there extra blur?
The component combines GLSL noise with a 40px CSS blur filter to achieve a level of softness impossible with shaders alone.
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.