OneTaskBy Tim King · Updated
Floating Shapes
Circles, Squares and Triangles That Float and Spin Behind a Hero Section, Pure CSS
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Floating Shapes works
Floating shapes are simple circles, squares and triangles that drift up through a section and spin as they go, adding playful motion behind a heading. Set the count, size, colours and speed, then copy the HTML and CSS.
Soft moving shapes suit friendly brands such as education, kids' products and creative agencies. The whole effect is CSS, so it works without JavaScript and is easy to restyle.
How the floating shapes move
Each shape is a small span with its own position, size, speed and delay stored in CSS custom
properties on its style attribute. One shared keyframe animation moves every shape from below
the section to above it while rotating it a full turn. Negative delays start each shape part way
through its journey, so the section is already full of shapes when the page loads.
Shapes and motion settings
Circles use border-radius: 50% and triangles use clip-path, so every shape is a plain element
you can recolour. The positions are fixed when you generate the code, so the layout is the same
on every visit. With reduced motion turned on, the shapes sit still, scattered across the section.
FAQ
Can I add my own shapes such as stars or hearts?
Yes. Add a new class with a clip-path: polygon() that draws the outline you want, then give some
of the spans that class. The clip path maker on this site can generate star and heart polygons.
Why do the shapes use custom properties instead of separate CSS rules?
Custom properties keep the CSS short. One rule reads each shape's position, size, colour and timing from its own style attribute, so adding a shape only needs one more line of HTML.
Will the floating shapes cover my text or buttons?
No. The content wrapper sits above the shapes with a higher z-index, so text stays on top and links stay clickable. Lower the opacity if the shapes still feel too busy behind the words.
How do I make the shapes float down instead of up?
Swap the from and to values in the keyframes so top starts at -20% and ends at 110%. The shapes
will then fall like leaves, and the rotation still turns them as they move down the section.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Bubble Background
Add see-through bubbles that wobble as they rise.
CSS Shapes Generator
Classic single-element CSS shapes with size and colour controls.
Aurora Background
Make a soft northern lights glow that drifts behind a section.
Particle Background
Build a drifting network of connected dots, no library.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.