Meet Bloom: A Shader That Opens Like a Flower
Ugo L.Last month I shipped Flow and Beam, the first two shader styles written from scratch for InstantGradient. Flow fills the frame, Beam crosses it. The third one grows out of it.
It is called Bloom, and it is live in the generator now. That makes eight styles in the editor.
Bloom: petals of light
Bloom is a fan of huge, ultra-soft petals radiating from the bottom edge of the frame, like a flower opening toward you or a sunrise drawn by hand. Thin dark creases separate the petals, and everything else is a smooth falloff of color.
The palette reads from the inside out. Your first color is the hot core where the petals meet, the next ones form concentric scalloped bands as you travel up each petal, and the last color is the background. So color order matters more here than in any other style: put a dark color last and the fan glows against it, put a light one last and the whole frame turns soft and airy.
Unlike Flow, there is no noise deciding the shape. The petals come from a single rose curve, the same flower-shaped polar equation you may remember from math class. That is why the edges stay perfectly clean at any size, from a thumbnail to an 8192px export.
Two ways to move
Bloom has two independent kinds of motion, and you can mix them freely.
Sway moves the shape. The petals breathe in and out, the whole fan leans slowly from side to side, and each petal flexes a little on its own. The cycles have different lengths, so the motion never feels like a loop.
Color flow moves the color instead. The petals hold still while your palette travels outward through them, band after band, from the core to the tips:
Sway alone is calm and organic. Color flow alone is hypnotic, closer to a pulse. Both together is the one to try first.
The controls
- Petals sets how many, from 6 broad ones to 16 slim ones.
- Pinch shapes each petal, from wide rounded lobes to narrow pointed blades.
- Bend curls the fan to the left or to the right, which takes it from a symmetrical flower to something closer to a wing or a wave.
- Scale zooms from a small bloom low in the frame to petals that run off the top.
- Sway and Color flow are the two motion modes above. Set both to zero for a perfectly still image.
- Seed, Speed, Loop, and Grain work the same as in Flow and Beam.
Palettes that walk from light to dark suit it best, because the last color becomes the backdrop:
What it is good for
Bloom has a clear focal point at the bottom and calm space at the top, so it frames content instead of fighting it. Hero sections with a headline above the fan, app splash screens, phone wallpapers, album covers, and pitch deck title slides all work well.
It is also the best looping style so far. Set Loop and the animation repeats with no visible jump, which is what you want for a video background. Color flow always fits a whole number of cycles into the loop, so even a short 10 second clip stays seamless.
Like every in-house style, the preview and the export come from the same engine. The 4K file is the design you saw, halftone, dithering, and glass effects all apply, and the code export gives you a React component or plain JavaScript in one click.
Free to design with. Press tab once in the editor to land on it.
Try BloomFAQ
Is Bloom free? Yes. Every shader style is free to design with, and 1x PNG export is free. MP4 video export, 4K, WebP, and custom dimensions are Pro.
How do I get a dark background behind the petals? Make the last color of your palette a dark one. Bloom uses the first color for the core and the last one for the background.
Can I export Bloom as a seamless loop? Yes. Set the Loop slider, then export as MP4. The video export panel tells you when your duration lines up for a perfect loop. For very short loops, lean on Color flow: parts of Sway hold still when the loop is too short to fit them.
Can I use it in my own site's code? Yes. The code export button gives you a React or vanilla JavaScript snippet built on our open-source shader package. More in React gradient backgrounds.
Keep reading
Your next gradient is one spacebar away
Free, no account needed. Just open and start creating.
Start creating