Your Confluence pages, but better
Give your Confluence pages the love they deserve. Discover Mosaic today and start building pages that users care about.
17 Confluence tools, ready-made in HTML
Share on socials
17 Confluence tools, ready-made in HTML
Jump to Section
Jump to section
1. The delivery progress bar
- Preview
- Get the code
- Customise the delivery progress bar
2. The live search and filter directory
- Preview
- Get the code
- Customise the live search and filter directory
3. The holographic 3D multi-display
- Preview
- Get the code
- Customise the holographic 3D multi-display
4. The colour gradient banner header
- Preview
- Get the code
- Customise the colour gradient banner header
5. The masonry image gallery
- Preview
- Get the code
- Customise the masonry image gallery
6. The release countdown timer
- Preview
- Get the code
- Customise the release countdown timer
7. The data doughnut chart
- Preview
- Get the code
- Customise the data doughnut chart
8. The animated data doughnut chart
- Preview
- Get the code
- Customise the animated data doughnut chart
9. The glass-effect panel card
- Preview
- Get the code
- Customise the glass-effect panel card
10. The slide and fill action card
- Preview
- Get the code
- Customise the slide and fill action card
11. The border slide and lift card
- Preview
- Get the code
- Customise the border slide and lift card
12. The icon scale card
- Preview
- Get the code
- Customise the icon scale card
13. The solid colour fill card
- Preview
- Get the code
- Customise the solid colour fill card
14. The rotating gradient border card
- Preview
- Get the code
- Customise the rotating gradient border card
15. The rotating light border card
- Preview
- Get the code
- Customise the rotating light border card
16. The ambient glow card
- Preview
- Get the code
- Customise the ambient glow effect card
17. The light sweep card
- Preview
- Get the code
- Customise the light sweep card
With the HTML macro, you can ‘vibe code’ your way to perfect Confluence pages. Here are some examples we’ve created for you to try.
Getting a Confluence page to look and behave exactly how you want can sometimes mean there’s an element of compromise. Whether that’s thanks to the rigid layouts, or due to a miscommunication between you and the developer you requested a custom chart from. But now, Mosaic and its HTML macro give you the opportunity to create bespoke, interactive components in minutes.
Mosaic is designed to make your content look incredible with minimal effort and the HTML macro increases the levels of creative freedom you can exploit. To give you a taste of that freedom we’ve created 17 tools and widgets for you to try in the HTML macro right now. Just scroll to the element that appeals to you here and then copy the lines of code into the tabs in the macro editor: HTML goes into HTML, CSS into CSS, and JavaScript (JS) into the JS tab. Just be aware that JS is only available to users with the Advanced Edition of Mosaic, so if you are in Standard Edition, some of these tools will not copy across to your macro. Once you have created it, you can then follow the instructions on customising the tool to suit your needs.
You can use the HTML macro for high-impact, custom elements, while using the standard formatting macros for the body of your content. This gives you the best of both worlds: when you need to update a line of text quickly, you can do it instantly in a formatting macro without having to hunt through lines of code to find the right string. Meanwhile, the HTML macro can handle complex and custom headers, charts, and interactive tools to keep your day-to-day edits seamless. Or if you are creating pages that don’t need updating, you can create whole pages using HTML that feature multiple elements and tools.
And the best part about the HTML macro is that you don’t have to be a cybersecurity expert to use it. We’ve built these tools to work in harmony with Atlassian’s native security measures. Our built-in safety features complement Atlassian’s own sanitisation protocols, ensuring that your custom widgets are as secure as they are stylish. So you can innovate while your IT department gets the peace of mind they require.
If you want to create your own widgets or pages, then why not try our vibe coding prompt and see how easy it is to bring your vision to life in minutes?
The delivery progress bar
A horizontal progress indicator that animates on load. Useful for tracking objectives, sprint goals, and quarterly targets.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
How to customise the delivery progress bar
Customising the progress bar requires making a quick update in both the HTML tab (for the data and text) and the CSS tab (for your brand colours).
Change the percentage and text (HTML tab)
To change the data, you need to update two things in your HTML: the visible text that the user reads, and the inline width style that tells the bar how far to fill up.
Find this section in your HTML:
<div class="progress-header">
<span class="progress-label">Q3 Delivery Target</span> <span class="progress-value">75%</span> </div>
<div class="progress-track">
<div class="progress-fill" style="width: 75%;"></div> </div>
Example of an updated version
If your new target is "Project Alpha" and it is 90% complete, your HTML should look like this:
<div class="progress-header">
<span class="progress-label">Project Alpha Completion</span>
<span class="progress-value">90%</span>
</div>
<div class="progress-track">
<div class="progress-fill" style="width: 90%;"></div>
</div>
Change the colours (CSS tab)
By default, the progress bar uses a left-to-right gradient. You can change this to match your corporate branding.
Find this section in your CSS:
.progress-fill {
height: 100%;
/* Change these two hex codes to your brand colours */
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
border-radius: 100px;
animation: fillUp 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
transform-origin: left;
}
To use a custom gradient: Replace #3b82f6 (the starting colour) and #8b5cf6 (the ending colour) with your own hex codes.
To use a solid colour instead: Delete the linear-gradient line entirely and replace it with a standard background colour rule, like this: “background: #FF0000;”.
The live search and filter directory
A searchable grid of cards that filters results in real-time as the user types. Useful for team directories, architecture glossaries, and FAQ hubs.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
NB: You will need Mosaic Advanced Edition to use JS.
How to customise the live search and filter directory
Because this component uses JS to securely inject the search bar, you will be making edits across all three tabs (HTML, CSS, and JS) to customise it.
Change the placeholder text (JS tab)
Since JS is responsible for building the search box, the placeholder text lives in the JS tab, not the HTML tab.
- Open the JS tab.
- Look for realInput.placeholder = "..." near the top of the script.
- Change the text inside the quotes to match your content:
E.g. realInput.placeholder = "Search for a team member, department, or role...";
Add or remove cards (HTML tab)
The JS automatically scans all the text inside the grid. You can add as many cards as you want, and the search will immediately know how to filter them.
To add a new card: Copy and paste an entire <div class="search-card">...</div> block and change the text inside.
To remove a card: Simply delete its block.
HTML
HTML
<div class="search-card">
<div class="sc-header">
<h4>Your New Title</h4>
<span class="sc-tag tag-blue">Your Tag</span>
</div>
<p class="sc-body">Your custom text goes here.</p>
</div>
Change the category tags & colours (HTML and CSS tabs)
The little coloured tags (like the blue Backend tag) are controlled by CSS classes.
To change the text: Just type a new word inside the <span class="sc-tag"> in your HTML.
To use a different colour: Change the class name on the span. The template includes tag-blue, tag-purple, tag-green, and tag-orange.
To create a brand new colour: Go to the CSS tab, find the tag colours, and add your own rule!
/* Add your own brand tag colour here! */
/* Add your own brand tag colour here! */
.tag-brand { background: #fee2e2; color: #ef4444; }
Change the search bar highlight colour (CSS tab)
When a user clicks into the search box to start typing, it highlights with a purple ring. To change this to your brand's primary colour, open the CSS tab and find the :focus rule.
CSS
.search-input-container input:focus {
/* Change these two hex codes to your brand colour */
border-color: #006d7a;
box-shadow: 0 0 0 4px rgba(0, 109, 122, 0.15); /* The last number is the opacity */
}
Change the grid layout (CSS tab)
Right now, the grid automatically figures out how many columns to show based on the screen size, with each card being at least 320px wide.
If you want fewer, wider cards (like 2 per row), increase that number to 400px.
If you want more, narrower cards (like 4 per row), decrease it to 250px.
CSS
.search-grid {
/* Change 320px to make the cards wider or narrower */
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
The holographic 3D multi-display
A 3D spatial, mouse-tracking dashboard that tilts and reacts to the user's mouse position.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
NB: You will need Mosaic Advanced Edition to use JS.
How to customise the holographic 3D multi-display
The "trick" of the holographic 3D display isn't just the visual effect; it is the deliberate spatial mapping of information. It forces context by placing content in three prioritised dimensions: a quiet background, a primary focal point, and an urgent foreground.
Strategic principles for 3D content
Customise this macro by thinking like an architect, not an editor. Map your data based on priority:
- Foreground (layer-fg): Immediate action. Reserved for critical incidents, active deployment alerts, or real-time blockers (DACI decisions). It should demand attention via its purple alert branding (background: rgba(139, 92, 246, 0.2)).
- Midground (layer-mid): Primary mission. This is the focal point. It holds the high-value performance data (OKRs, Uptime, Project Health) that the viewer must understand immediately.
- Background (layer-bg): Broad context. For low-priority health indicators, general system summaries, or long-form notes that provide foundational knowledge but do not require instant reaction.
Technical customisation points
The core visual mechanics are defined in the CSS, utilising translateZ to pull elements forward (negative values) or push them back (positive values) on the Z-axis.
1. Defining the depth hierarchy (translateZ)
The "pop" of the display is controlled entirely by the CSS depth.
- To make a card "float" further away (background), decrease the translateZ value (e.g., -50px to -150px in .layer-bg).
- To bring a card closer (foreground), increase the translateZ value (e.g., 120px to 200px in .layer-fg).
CSS
/* Example: Pushing the background layer deeper for dramatic context */
.layer-bg {
transform: translateZ(-150px); /* Changed from -50px */
}
2. Customising the grid floor (holo-floor)
The floor provides the spatial anchor. If your dashboard uses a different brand palette than sky blue, adjust the floor grid colours.
Change the sky blue (rgba(56, 189, 248, 0.2)) to your preferred primary status or brand colour.
CSS
/* Customising the floor to a subtle green status grid */
.holo-floor {
background-image:
linear-gradient(rgba(16, 185, 129, 0.15) 1px, transparent 1px), /* Teal/Green */
linear-gradient(90deg, rgba(16, 185, 129, 0.15) 1px, transparent 1px);
}
3. Adjusting the mouse-tracking sensitivity (JS)
The 15 and -15 values in the JS determine how much the scene tilts in response to the mouse.
- Increase these values (e.g., to 30) for an exaggerated, rapid "holographic" responsiveness.
- Decrease these values (e.g., to 5) for a slower, more subtle spatial effect appropriate for high-traffic dashboards where excessive motion could become a distraction.
JS
/* JS sensitivity modification: Exaggerated spatial tilt */
const rotateX = (x - centerX) / centerX * 30; // Changed from 15
const rotateY = (y - centerY) / centerY * -30; // Changed from -15
By prioritising information and adjusting depth and responsiveness, you ensure the holographic 3D display is a functional tool for situational awareness, not merely a distracting effect.
The colour gradient banner header
A full-width header block featuring a gradient background and a call-to-action button. Useful for anchoring intranet homepages and driving users to key resources.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
NB: You will need Mosaic Advanced Edition to use JS.
How to customise the colour gradient banner header
Because we had to hardcode values to survive the sanitiser, you will need to make updates directly within the respective tabs.
Content and text (HTML tab)
Update the <h1> (headline) and <p> (subheading) tags to match your campaign or portal name.
Change the button text inside the <a class="ms-hero-cta"> tag.
CTA destination (HTML tab)
Locate the <a href="#"...> tag and replace the # with your target URL.
Brand colours (CSS tab)
Background base: Find background-color: #0a192f; under .ms-hero-banner and swap the hex code.
Gradient blobs: Modify the rgba() values within the radial-gradient lines to change the teal and purple mesh effects.
Button: Find background-color: #64ffda; under .ms-hero-cta (and its hover state counterpart below it) to update the button colour.
Dimensions (CSS tab)
Adjust min-height: Edit 320px; under .ms-hero-banner if you need the banner to be taller or shorter on the page.
The masonry image gallery
A fluid, interlocking image grid that automatically calculates dimensions to prevent cropping. Useful for displaying team off-sites, product mockups, or event photos.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
How to customise the masonry image gallery
The HTML tab: content and structure
Change the titles: Find the text Team Offsite & Events inside the <h2 class="ms-gallery-title"> tags and replace it with your own heading. Do the same for the subtitle just below it.
Remove the header entirely: If you just want a pure image grid without a title, simply delete the entire <div class="ms-gallery-header">...</div> block. The grid will naturally slide up to fill the space.
Add more images: To expand the gallery, copy an entire image block (from <div class="ms-masonry-item"> to its closing </div>) and paste it directly beneath the last one. You can add as many as you like; the grid will automatically calculate where to put them.
Update the images: Replace the placeholder src="..." URLs with the actual links to your company's images.
The CSS tab: layout and branding
Change the number of columns: By default, desktop screens show 3 columns. To make the images smaller and fit 4 columns, scroll to the bottom of the CSS tab to find @media (min-width: 900px). Change column-count: 3; to column-count: 4;.
Adjust the image spacing: If you want tighter or wider gaps between your photos, you need to change two numbers. Find .ms-masonry-grid and change column-gap: 20px;. Then, find .ms-masonry-item and change margin-bottom: 20px; to match your new number perfectly.
Change the subtitle colours: To match your company branding, find .ms-gallery-subtitle. Change the color: #64748b; (the text colour) and the background: #f8fafc; (the pill shape colour) to your brand's hex codes.
Tweak the hover zoom: When a user hovers over an image, it slightly zooms in to feel premium. Find .ms-masonry-item:hover img at the very bottom. Change transform: scale(1.03); to scale(1.1); for a dramatic 10% zoom, or scale(1.0); to turn the zoom off entirely.
The release countdown timer
A dynamic countdown clock that displays days, hours, minutes, and seconds until a specified date. Useful for tracking product launches, IT migrations, or company-wide events.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
NB: You will need Mosaic Advanced Edition to use JS.
How to customise the release countdown timer
Setting your target date (the JS tab)
Open the JS tab and locate the targetDateString variable at the top. Change it to your exact launch date using the standard web format: YYYY-MM-DDTHH:MM:SS. For example, to count down to Christmas morning 2026, you would type '2026-12-25T08:00:00'.
Updating the titles (the HTML tab)
In the HTML tab, look for Project Apollo Go-Live and replace it with your project's name. Directly below it, update the Target: text to reflect a human-readable version of your launch date.
The completion message (the HTML tab)
By default, when the timer hits zero, the clock disappears and a success message appears. Scroll to the very bottom of the HTML tab to find 🎉 The launch window has arrived!. You can change this text to anything you like (e.g., "The new HR Portal is now live! Click here to login.").
Changing the brand colours (the CSS tab)
The background: Find .ms-countdown-card and adjust the linear-gradient hex codes to match your company's primary colours.
The numbers: Find .ms-time-number and change the color: #38bdf8; to your preferred highlight colour.
The data doughnut chart
A static, CSS-rendered doughnut chart for data visualisation. Useful for displaying budget allocations, resource distribution, or project phases directly on the page.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
How to customise the data doughnut chart
Because this chart uses zero JS, the "slices" of the pie are drawn using a CSS conic-gradient. To change the data, you have to do a little bit of basic math to set the "start" and "stop" points for each colour.
Example: If your data is 40% Blue, 35% Green, and 25% Grey.
- Blue slice: Starts at 0% and ends at 40%.
- Green slice: Starts at 40% and ends at 75% (40 + 35 = 75).
- Grey slice: Starts at 75% and ends at 100% (75 + 25 = 100).
Think of it like a relay race: where one colour ends, the next colour must begin. All your slices added together must equal 100%.
Step 1: Do the maths for your slices
Let’s say you want to expand the chart from 3 items to 4 items with the following data and custom colours:
- Brand blue: 30%
- Brand purple: 20%
- Brand green: 35%
- Brand orange: 15%
To write the CSS, keep a running total of where each slice stops:
- Blue starts at 0% and ends at 30%.
- Purple starts at 30% and ends at 50% (30 + 20 = 50).
- Green starts at 50% and ends at 85% (50 + 35 = 85).
- Orange starts at 85% and ends at 100% (85 + 15 = 100).
Step 2: Update the CSS tab
Find the .donut-chart class in your CSS. You can add as many colours as you want, as long as you follow the [Colour] [Start%] [End%], format.
CSS
.donut-chart {
border-radius: 50%;
/* Add your custom hex colours and sequential percentages here */
background: conic-gradient(
#3B82F6 0% 30%, /* Blue: 0 to 30 */
#8B5CF6 30% 50%, /* Purple: 30 to 50 */
#10B981 50% 85%, /* Green: 50 to 85 */
#F59E0B 85% 100% /* Orange: 85 to 100 */
);
}
Step 3: Update the HTML tab (the legend)
If you added a 4th colour to the CSS, you must add a 4th item to the legend in your HTML so your users know what the data means!
- Change the large centre text (.donut-number).
- Add a new <li> for your new data point.
- Update the style="background: #..." on each legend dot so it matches the exact hex codes you just used in your CSS.
HTML
<div class="donut-hole">
<span class="donut-number">30%</span>
<span class="donut-label">Blue Segment</span>
</div>
<ul class="donut-legend">
<li><span class="dot" style="background:#3B82F6;"></span> Brand Blue (30%)</li>
<li><span class="dot" style="background:#8B5CF6;"></span> Brand Purple (20%)</li>
<li><span class="dot" style="background:#10B981;"></span> Brand Green (35%)</li>
<li><span class="dot" style="background:#F59E0B;"></span> Brand Orange (15%)</li>
</ul>
The animated data doughnut chart
An animated version of the doughnut chart with a sweeping reveal and live number counter. Useful for displaying key completion metrics and reporting data.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
How to customise the animated data doughnut chart
Change the data slices
Look for .donut-chart in the CSS and update the conic-gradient hex codes and percentages exactly as you did for the static version.
Change the number animation target
Look for @keyframes countUp at the bottom of the CSS. Change the to { --num: 82; } rule to match your main data point. If your target is 95%, change it to --num: 95;.
Change the background colour
If you change the .donut-card background from #ffffff (white) to a dark colour, you must also change the #ffffff in the .donut-sweep and .donut-hole rules so the sweeping mask blends perfectly with the new card colour!
The interactive card collection
Whether you need a call-to-action, a sleek navigation menu, or a subtle way to highlight critical alerts, these eye-catching cards bring a level of polish to your Confluence pages. They all share the same core functions, acting as a header, breaking up text, introducing something new and so on; simply choose the animation style that best fits your layout.
The glass-effect panel card
A layered information card featuring a frosted-glass depth effect over a shifting background. Useful for framing executive summaries, mission statements, or strategic goals.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
NB: You will need Mosaic Advanced Edition to use JS.
How to customise the glass-effect panel card
Change the floating blob colours (CSS tab)
Find the .glass-blob rule. The blob is just a blurred circle with a gradient.
CSS
.glass-blob {
/* Swap these two hex codes to change the blob's color */
background: linear-gradient(135deg, #FF5722, #FFC107);
}
Make the glass more or less transparent (CSS tab)
Find the .glass-card rule. The background uses an RGBA colour where the last number 0.05 is the opacity (5%). Increase it to 0.1 or 0.2 for a more solid "frosted" look.
CSS
.glass-card {
/* Change 0.05 to 0.15 for more solid white frosting */
background: rgba(255, 255, 255, 0.05);
/* Change 16px to 8px for less blur, or 24px for more blur */
backdrop-filter: blur(16px);
}
The slide and fill action card
An interactive display card that floods with a solid colour from left to right on hover, instantly inverting the text colour for maximum contrast.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
How to customise the slide and fill action card
Change the fill colour (CSS tab)
Find the .action-card::before rule. This controls the invisible colour block that waits on the left side of the card before you hover over it.
CSS
.action-card::before {
/* Change this to the colour you want the card to become when hovered */
background: #0f172a;
}
Change the text colour when hovered (CSS tab)
If your fill colour is dark, your text needs to turn white so people can read it. If your fill colour is light, your text should turn dark.
CSS
/* This flips the text colour when the user hovers over the card */
.action-card:hover h3,
.action-card:hover p {
color: #ffffff; /* Change to #000000 if your fill background is light */
}
The border slide and lift card
A fun interactive card that lifts smoothly off the page on hover while a bright gradient border slides in along the bottom edge and the emoji tilts.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
How to customise the border slide and lift card
Change the slide colour
Find .bs-card::after and alter the background gradient to match your corporate identity.
Disable the lift
Delete transform: translateY(-8px); from the .bs-card:hover rule if you only want the border to slide.
Change the icon behaviour
In .bs-card:hover .bs-icon, change scale(1.2) to scale(1.5) for a massive zoom, or change rotate(5deg) to rotate(0deg) to stop it from tilting.
The icon scale card
Another eye-catching card that keeps the body completely stationary while the icon tilts and scales up without shifting your surrounding grid layout.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
How to customise the icon scale card
Adjust the bounce
The transition: transform rule uses a custom cubic-bezier that forces the icon to scale up slightly past 100% and "bounce" back. Change it to ease for a standard, smooth zoom.
Adjust the spin
In .scale-card:hover .scale-icon, change rotate(-10deg) to rotate(360deg) to make the icon do a complete flip when hovered!
The solid colour fill card
An impactful card that floods rapidly with a solid block of colour from the bottom up on hover, creating a bold and immediate visual change.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
How to customise the solid colour fill card
Change the fill direction
In .fill-card::before, change transform-origin: bottom; to transform-origin: top; to make it fill downwards.
Change the fill colour
Update the blue background: #0ea5e9; to your preferred brand colour. Ensure it is dark enough that white text remains legible on it.
The rotating gradient border card
A static card that features a continuous, seamless conic-gradient border that slowly rotates around the card container.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
How to customise the rotating gradient border card
Change the border colours
Look for background: conic-gradient(...) in the CSS. Swap out the hex codes.
Crucial rule: The first and last colours must be exactly the same (e.g., #3b82f6) so the loop is seamless!
Change the border thickness
Change padding: 3px; inside the .anim-border-card::before rule.
Change the speed
In animation: borderSpin 4s linear infinite;, lower the 4s to 2s for a faster spin.
The rotating light border card
Creates the illusion of a single, looping beam of coloured light travelling around the edge of the card.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
How to customise the rotating light border card
The effect is created by a rotating background layer that peeks through a thin margin. Use these tips to tweak the movement and colours.
Adjust the border thickness
The thickness of the glowing line is controlled by the padding on the .animated-card class.
Subtle: Set padding to 1px or 2px.
Bold: Increase padding to 5px or 8px for a chunky neon look.
Refine the colour palette (CSS tab)
Locate the conic-gradient inside the .animated-card::before rule. This list determines which colours "orbit" the card.
The comet effect: Start and end your list with transparent to create a single beam of light that fades in and out.
The full ring: Remove the transparent entries and list 3–4 solid colours to create a continuous, multi-coloured glowing border.
Control the spin speed
Inside the .animated-card::before rule, find the animation property (e.g., borderSpin 4s linear infinite).
High energy: Change 4s to 1s or 2s for a rapid, high-tech pulse.
Elegant glow: Change 4s to 10s or 15s for a very slow, premium ambient rotation.
Preventing "flicker"
To ensure the animation is perfectly smooth, always ensure your gradient has at least two "stops" of the same colour at the start. This prevents the light from appearing to "jump" when the 360-degree rotation resets.
The ambient glow card
An interactive card that sits quietly in dark mode until hovered over, triggering a deep, layered radial shadow that mimics a physical, intensifying glow.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
How to customise the ambient glow effect card
The glow uses RGBA colours. Currently, it uses 13, 148, 136 (teal).
Change the glow colour
Find the RGB values for your brand colour and replace those three numbers across all the box-shadow rules. Leave the last decimal (e.g., 0.2 or 0.5) exactly as it is—that controls the fading opacity!
The light sweep card
A minimalist static card with a subtle white gradient that sweeps continuously across the card on a loop, mimicking the reflection of light off a polished surface.
Try it yourself
- Install Mosaic for Confluence.
- Type /HTML on your Confluence page and select it from the menu (this will automatically open the macro editor).
- Use the Import code button to upload your files and press Save.
How to customise the light sweep card
Change the sweep speed
In animation: shimmerSweep 3s ease-in-out infinite;, change 3s to 1.5s for a rapid flash, or 6s for a very slow, lazy gleam.
Make the light beam wider
In the .shimmer-card::after rule, change width: 40%; to width: 80%;.
Make the light brighter
In the linear-gradient, change rgba(255, 255, 255, 0.15) to 0.3 or 0.5 for a much harsher, brighter reflection.
Related Content
Read more
Written by
Related Content
Read more