Animated Background is a div you can put any content inside. Pick an effect such as Bokeh, Starfield, Ripple or Northern Lights, then set the colours, speed and intensity. The content sits on top and stays clickable.
An Ocean hero band, nine CSS effects on small promo tiles, and four canvas effects with different settings. Every box is an Animated Background with ordinary Breakdance content inside it.
Effect Type: Ocean with custom colours (Colours: Use background effect colours) for a sunset sky. Horizon 30%, reflection 70%, shimmer 50, Animation Duration 30 seconds for a calm swell.
Eight bright rooms above a quiet cove, with breakfast on the terrace and the coast path on the doorstep.
Check availabilityEach tile is its own Animated Background with a heading, text and a button inside. The small pill above each heading names the effect.
A four-course dinner, a live band and dancing until late.
Book a tableSend an invoice in two minutes and take card payments online.
Try it freeBuild games and websites in small, friendly groups.
Find a sessionLogos, websites and packaging for independent businesses.
See our workLook through our 16-inch telescope with a guide on hand.
Reserve a placeA new play in two acts. Runs until 30 November.
Buy ticketsTwo-hour lessons for beginners, with boards and wetsuits included.
Book a lessonWarm stones, soft music and a pot of herbal tea afterwards.
Book a treatmentNew bands, long interviews and no adverts.
Listen liveNorthern Lights, Flowing Silk, Contour Lines and Particle Currents, each shown with a different Canvas Effects setting. With Ocean above, that makes all 14 effects on this page.
Four nights in a glass cabin, with a guide who knows where to look.
View datesNorthern Lights: Effect preset colours, Blur 60, 30 seconds.
Soft wool, washed silk and warm neutrals, made in small batches.
Shop the collectionFlowing Silk: Colours: Use background effect colours (pink, lilac and gold).
Download maps and daily notes for every walk on your trip.
See the routesContour Lines: Motion: Still. The lines are drawn once and do not move.
Track deliveries, fuel use and driver hours as they happen.
Book a demoParticle Currents: Direction: Reverse, Detail density 60.
Use it like any other div.
Drop Animated Background onto the page and add your headings, text or buttons inside it.
Pick one of the 14 effects under Background Effect and set its colours.
Adjust duration, intensity, blur and opacity until the background suits the content.
Nine CSS effects and five canvas effects, all chosen from one dropdown.
Each effect is set with plain numbers and colour pickers.
Nest any Breakdance elements inside. Content can grow the box, and the background stays clipped to it.
Set a primary, secondary, accent and background colour. Canvas effects can use their own preset palette or your colours.
Set the animation duration from 5 to 60 seconds, plus intensity, blur and opacity.
Start the Ripple effect from any corner or the centre, and set how far it grows.
Set the horizon height, reflection position and shimmer for the Ocean effect.
Run canvas effects forwards or in reverse, or show them as a still image.
Choose rendering quality and a frame rate from 10 to 30. Canvas effects pause when off screen or in a hidden tab.
Visitors who ask for reduced motion see a still background instead of an animation.
Set min height, padding, border radius and overflow, and use the Breakdance layout controls for the content.
Anywhere a flat colour feels too plain.
Put your main heading and buttons over a slow, calm animation.
Draw the eye to a sign-up or offer box.
Give each card its own subtle moving background.
Use Starfield or Northern Lights for a night-time feel.
Use the Ocean effect with your own sky and water colours.
Add depth to dark sections without extra images.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Background Effect | ||
| Effect Type | Choose one of the 14 effects. | Bokeh |
| Primary Color | Main effect colour. | #667eea |
| Secondary Color | Supporting colour. | #764ba2 |
| Accent Color | Third colour for highlights. | #f093fb |
| Background Color | Base colour behind the effect. | #1a1a2e |
| Animation Duration (seconds) | 5 to 60. Larger values move more slowly. | 20 |
| Intensity | 10 to 100. How strong the motion is. | 50 |
| Blur Amount | 0 to 100. Softness of the effect. | 50 |
| Effect Opacity | 10 to 100. Transparency of the CSS effects. | 70 |
| Ripple Position | Ripple only. A corner or the centre. | — |
| Ripple Growth | Ripple only. 10 to 100. | — |
| Canvas Effects | ||
| Colours | Effect preset, or use the background effect colours. | Effect preset |
| Motion | Animate or Still. | Animate |
| Direction | Forward or Reverse. | Forward |
| Rendering quality | Economy, Balanced or Detailed. | Balanced |
| Frame rate | 10 to 30 frames per second. | 30 |
| Detail density | Number of waves, ribbons, lines or particles. | 50 |
| Pattern scale | Size and spacing of the pattern. | 100 |
| Line / particle size | Thickness of lines and particles. | 1.25 |
| Canvas opacity | 0 to 100. | 100 |
| Ocean horizon (%) | Ocean only. Height of the horizon. | 24 |
| Ocean reflection position (%) | Ocean only. | 72 |
| Ocean shimmer | Ocean only. Amount of reflected glints. | 40 |
| Container | ||
| Min Height | px, vh or %. Responsive. | 400px |
| Padding | Inner spacing. Responsive. | — |
| Border Radius | Rounded corners. | — |
| Overflow | Hidden or Visible. | Hidden |
| Content Layout | ||
| Layout | Breakdance layout controls for the content inside. | — |
Yes. It is a container, so you can nest headings, text, buttons or whole layouts. They sit above the background and stay clickable.
The canvas effects share one animation loop and stop when off screen or in a hidden tab. Use Economy quality or a lower frame rate if you have several on one page.
If a visitor's device asks for reduced motion, they see a still background.
Increase the Animation Duration. Larger values move more slowly. Values of 30 to 40 seconds work well behind text.
Yes. Set the four colours under Background Effect. For canvas effects, set Colours to use the background effect colours.
Animated Background is included with Phox Elements, along with 140+ other premium elements for Breakdance.