Fixed001 Navigation

• Buy Now

Fixed Navigation001

Always part of your site.

This plugin keeps your navigation seamlessly fixed at the top of the screen. No need to worry about whether your site has a hero section before the navigation—it will adjust and staying where it should.You can use it with the Fixed Menu Plugin to enhance its functionality.
-
Not ready for this? ▶ Widget - Fixed Navigation

• Seasoning ▼

• Leaving ▲

Ingredients: CSS, JavaScript

▼ Single License - $30 USD
▼ Unlimited License - $300 USD

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

launched
2025-02-24

Clip002

Expand and manage your content easily

Click Expand to see it in action

• Expand ▼

This plugin allows you to manage and display page content more dynamically. It also supports multiple column layouts.Heads-up: sounds effect is not included.
-
Not ready for this? ▶ Widget - (Un)fold

Ingredients: CSS, JavaScript

▼ Single License - $15 USD
▼ Unlimited License - $150 USD

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

• Buy Now

• Collapse ▲

Shimmer003

Add a small touch

Add a shimmer effect to target images as they enter the screen to make them visually attractive. You can adjust the color, width, animation start and end points, and choose whether to sync it with scrolling.

Ingredients: GSAP, CSS, JavaScript

▼ Free - receive TXT files and a PDF guide.

You'll need at least the Carrd Pro Plus Plan (with the embeds feature and advanced setting feature) to use this plugin.

Hyper Accordion005

Interactive Demo ▼

• Buy Now

Hyper Accordion005

◀ Interactive Demo

With this plugin, you can easily manage and showcase website content by turning elements into a 2 or 3-level accordion. It’s not limited to text—it works with same-level elements and even entire containers. This helps reduce endless scrolling and improves content organization.Other use cases: FAQs section, Theme Toggle Demo
Not ready for this? ▶ Widget - (Un)fold
-

• Seasoning ▼

• Leaving ▲

Ingredients: CSS, JavaScript

▼ Single License - $30 USD
▼ Unlimited License - $300 USD

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

launched
2025-03-11

Dual Tooltip007

• Buy Now

Dual Tooltip007

for ss(Text)tt(Text, Table, List, Links, Gallery Caption)ee and Non-Text elements

With this plugin, you can add extra information to your content when users hover or click an element. It works on both text and ss(non-text elements.)tt(Icons, Buttons, Timer, Image, Gallery, Slideshow)ee
You can also customize its style to fit your page design.
-
Not ready for this? ▶ Tip - Set Tooltip for Desktop

Ingredients: CSS, JavaScript

▼ Single License - $30 USD
▼ Unlimited License - $300 USD

You'll need at least the Carrd Pro Plus Plan (with the embeds feature and advanced setting feature) to use this plugin.

launched
2025-03-16

Rotating Badge Text008

Rotating
Badge Text008

Typography in Motion

With this plugin, you can transform the Gallery element into a Rotating Badge Text and customize its style to match your website.

Ingredients: CSS, JavaScript

▼ Free - receive TXT files and a PDF guide.

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

launched
2025-03-19

Swipe Scroller011

• More Showcase

Flexible Element Count

Convert your container content into a horizontal scroller to showcase services or images. There is no limit on the number of elements.

Ingredients: CSS, JavaScript

▼ Single License - $15 USD
▼ Unlimited License - $150 USD

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

launched
2025-04-02

• Buy Now

Magnifier013

Hover over the image to see it in action ▼

This plugin allows you to magnify images—including galleries and slideshows—to size you prefer. It also supports external image URLs as zoom sources.

Magnify. Focus. Discover.

Ingredients: CSS, JavaScript

• Buy Now

▼ Single License - $30 USD
▼ Unlimited License - $300 USD

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

launched
2025-04-12

Break free from layout limits.

Quisque ligula nullam lectus taciti donec volutpat porttitor cursus ante. Vehicula in vel inceptos quis tristique si dictumst nam adipiscing quam.

Designed for flexibility and control.

Go beyond static displays.

Mix content and media effortlessly.

Quisque ligula nullam lectus taciti donec volutpat porttitor cursus ante.

• Template
• Back

Bring interactivity to your visuals.

Your gallery, your way.

• Top
• Back

Price Switch017

• Price1
• Button
• Price2

Lite$price^{• unlimited projects
• email support
• access to all templates
• basic analytics
• cancel anytime}

Premium$price^{• unlimited projects
• priority support
• access to all templates
• advanced analytics
• save 17% compared to lite}

▲ Toggle the Switch

This plugin adds a price switch feature to your container columns.
Simply design your column content using Carrd’s native elements — the plugin will handle the logic for the switch functionality automatically.

Ingredients: CSS, JavaScript

▼ Free - receive TXT files and a PDF guide.

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

launched
2025-08-02

• Chevron Left
• Chevron Right

Carousel ∞018

Infinite Loop

This plugin transforms your content into a seamlessly looping card carousel, automatically connecting the first and last slides to deliver a smooth, continuous browsing experience.
— Perfect for showcasing your services, features in a dynamic and engaging way.

• More Showcase

Ingredients: CSS, JavaScript

▼ Single License - $30 USD
▼ Unlimited License - $300 USD

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

launched
2025-08-22

• Buy Now

Carousel ∞

4

1

2

3

Smoother Scroll020

Interactive Demo ▼

Smoother Scroll020

◀ Interactive Demo

Simply let your site have a smoother animation effect.By refining scroll behavior and easing transitions, Smoother Scroll brings a more polished, fluid feel to your animations — quietly elevating the overall user experience.

Ingredients: GSAP, CSS, JavaScript

• Seasoning ▼

• Leaving ▲

▼ Free - receive TXT files and a PDF guide.

You'll need at least the Carrd Pro Standard Plan (with the embeds feature) to use this plugin.

{ WIDGETs }Use the Action Button to preview the widget. Click the Widget Title to see and copy the code snippet.

• Action

<style>
#image03,
#gallery01,
#slideshow01 {
perspective: 300px;
}
#image03 span,
#gallery01 .inner,
#slideshow01 .content {
backface-visibility: visible;
animation: spin-3d 3s linear infinite;
}
@keyframes spin-3d {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>

• Copied
• Copy

1. Replace #... with the actual ID of your image element.
2. Supports three element types: Image, Gallery, and Slideshow. Use as needed. If you only use one element, remove the others (including the comma).
3. Adjust the perspective value to increase or decrease the 3D effect.
4. Modify 3s to control the spinning speed (shorter = faster, longer = slower).

• Action

<style>
[#image05] img {
animation: spin 15s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>


• Copied
• Copy

1. Replace [#image05] with the actual ID of your Image element.
2. Adjust 15s to change the rotation speed.
3. Change 360 to -360 to spin counter-clockwise instead of clockwise.

• Action

<style>
[#buttons04] .switch a {
cursor: pointer;
max-width: 3.5rem !important;
}
[#buttons04] svg {
display: none !important;
}
[#buttons04] .switch svg {
width: 100% !important;
margin: 0 !important;
display: block !important;
transform: translateX(-50%);
transition: transform 0.5s ease !important;
}
[#buttons04] svg.state-on {
transform: translateX(50%) !important;
}
</style>
<script>
const target = document.querySelector('[#buttons04] li:nth-of-type(2)');
const circle = target.querySelector('svg');
target.classList.add('switch');
target.addEventListener('click', () => {
circle.classList.toggle('state-on');
});
</script>


• Copied
• Copy

1. Create a Buttons element and add a total of 3 buttons.
2. Set each button’s URL to browser:none.
3. Change the middle button’s icon to a circle.
4. Set the first and third button’s background to transparent.
5. In the style options:
- Select Solid.
- Enable Icon + Label.
- Uncheck Span multiple lines.
- Set the Width to Auto and adjust Corner Rounding to the maximum.
6. Set Mobile layout to Default.
7. Replace [#buttons04] in your code with the actual ID of your Buttons element.

• Action

<style>
[#buttons03] > li > a {
cursor: pointer;
background: linear-gradient(to top right, #111, #112);
background-size: 0% 100%;
background-repeat: no-repeat;
transition: background-size 0.4s ease, color 0.4s ease;
}
[#buttons03] > li > a:hover {
background-size: 100% 100%;
}
</style>


• Copied
• Copy

1. Replace [#buttons03] with the actual ID or class of your target element. This can also be an icon.
2. Adjust the color values in the linear-gradient to achieve your desired effect. Make sure the two hex color values are different.

• Action

<style>
[.element] > *:first-child,
[.element]:not(:has(*)) {
cursor: pointer;
background-image: linear-gradient(to right, white, white);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 0% 2px;
transition: background-size 0.4s ease;
}
[.element] > *:first-child:hover,
[.element]:not(:has(*)):hover {
background-size: 100% 2px;
}
</style>


• Copied
• Copy

1. Replace [.element] with the actual ID or class of your target element.
2. Adjust the values in the linear-gradient to get the color you want.
3. Depending on your layout, you may need to tweak the element’s width to make the underline well-positioned.

• Action

<!------ Inline ------>
<div id="burger-x">
<span></span>
<span></span>
<span></span>
</div>
<!------ Head ------>
<style>
#burger-x {
width: 30px;
height: 24px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
cursor: pointer;
z-index: 1000;
}
#burger-x span {
display: block;
height: 4px;
background: #eee;
border-radius: 2px;
transition: all 0.3s ease;
}
#burger-x.active span:nth-child(1) {
transform: translateY(10px) rotate(45deg);
}
#burger-x.active span:nth-child(2) {
opacity: 0;
}
#burger-x.active span:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
}
</style>
<!------ Body End ------>
<script>
const burger = document.getElementById('burger-x');
burger.addEventListener('click', () => {
burger.classList.toggle('active');
});
</script>


• Copied
• Copy

Replace background: #333 with your desired color.

• Action

<style>
.floatingchat-container-wrap {
right: -100px;
left: unset;
}
.floatingchat-container-wrap-mobi {
right: -100px;
bottom: 0px;
left: unset;
}
.floatingchat-container-wrap-mobi iframe {
position: unset !important;
}
.floating-chat-kofi-popup-iframe{
right: 16px;
left: unset;
}
</style>


• Copied
• Copy

1. Copy and paste your Ko-fi floating button code into a Carrd Embed element.
2. Remove any text inside floating-chat.donateButton.text.
3. Set floating-chat.donateButton.background-color to "transparent".
4. Paste the additional customization code (above) into the same Embed element.

• Action

<details style="text-align: left;">
<summary style="cursor: pointer;">[Unfold]</summary>
[<ul style="display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; ">
<li><a>link</a><li>
<li><a>link</a><li>
<li><a>link</a><li>
</ul>]
</details>


• Copied
• Copy

1. Replace [Unfold] with your desired title.
2. Replace the entire [<ul> ... </ul>] block with your own HTML content.

• Action

<style>
[#text09] [strong] {
background: linear-gradient(90deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>


• Copied
• Copy

1. Add your text content.
2. Replace [ #text09 ] with your actual text ID.
3. Use strong for bold, em for italic, u for underline, and a for links.
4. Replace the #..... hex color code with one that matches your style.

• Action

<style>
[#container05] {
position: fixed;
top: 0;
left: 0;
z-index: 20;
}
[#container06] {
visibility: hidden;
}
</style>


• Copied
• Copy

1. Create your custom navigation container.
2. Duplicate it to make a second one.
3. Place both containers just before the #header control break.
4. Replace [ #container05 ] and [ #container06 ] with the actual IDs of your containers.
5. If it isn’t fixed, set its position: fixed !important;.

• Action

<style>
[#icons01] {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 10;
}
</style>


• Copied
• Copy

1. Create your custom icon.
2. Place the icon just before the #header or after the #footer control break.
3. Replace [ #icons01 ] with your icon’s actual ID.

• Action

<style>
@keyframes breathe {
0% {
transform: scale(0.9);
}
100% {
transform: scale(1.1);
}
}
[#buttons01] {
animation: breathe [2s] ease-in-out alternate infinite;
}
</style>


• Copied
• Copy

1. Replace [#buttons01] with your element’s ID.
2. Modify [ 2s ] to control the animation duration.

• Action

<style>
@keyframes marquee {
to {
transform: translateX(-50%);
}
}
[#container05] > .wrapper {
overflow: clip;
}
[#container05] > .wrapper > .inner {
min-width: max-content !important;
animation: marquee [20s] linear infinite;
padding-left: calc(var(--gutters, 0px) - var(--padding-horizontal, 0px));
}
</style>


• Copied
• Copy

1. Set up a container with two columns.
2. Add marquee text and duplicate it into the second column.
3. Replace [ #container05 ] with your container’s ID.
4. Modify [ 20s ] to control the animation duration.

{ TIPs }The kitchen sink of tips — in the making.

• Change the Site Loader Icon ▼ 2026.03

Have a site that presents your style, and show your icons while the page is loading instead of Carrd's default loader. Embed the following code in Head and replace the URL.<style>
#loader {
background-image: url(https://your-icon-url-here) !important;
}
</style>Try combining this with the Spin-3D widget for a nicer effect.

• ▲ Collapse

• Where to Start III ▼ 2026.02

Complex Appearance?Each element comes with many manual settings — especially alignment and spacing.
So is there a rule to follow?Yes. Think of it from top to bottom, from macro to micro:Page → Container → ElementWhen you set the Page-level settings, it establishes the main rule for everything inside it.
If an element’s Contents/Alignment value is set to Auto, it follows the rule of its upper level (Page or Container).You only need to manually set an element’s Contents/Alignment value when you want it to break away from its parent’s rule.The same principle applies to Animation settings.

• ▲ Collapse

• Where to Start II ▼ 2026.02

After setting up the Background and Canvas (Page), all that’s left is adding elements to enrich your site.Among them, there’s one special element — the Container. So when and why should you use it?1. Apply a different style or background
Use a Container when you want a area to have a different color, image, or style from the page/background.2. Better organize elements
Placing elements inside a Container makes it easier to adjust their position and alignment.3. Create columns for layout
The Page behaves like a waterfall — each element takes up a full row by default.
A Container allows you to create columns and give elements their own structured space.

• ▲ Collapse

• Where to Start I ▼ 2026.02

I usually follow this path when starting a new site:1. Decide the background style
Choose the overall background first (solid color, image, slideshow, etc.).
This will appear across the entire screen.2. Set up the Page element
The Page element acts as a canvas. It’s where your site content lives.
But what’s the difference between Default and Box (Wide Box / Tall Box), and which one should you use?• Box
Lets you style the page itself — such as setting a background color, margin, border, etc.
Think of it as creating a card layout.• Default
Focuses more on the content itself. You can’t style the page directly.
It works well when you have rich content that naturally forms the whole layout.Although both can achieve similar results, this is how I usually distinguish between them.

• ▲ Collapse

• Element Visibility on Mobile & Desktop ▼ 2026.02

Carrd Standard account users cannot control element visibility on different devices. However, you can use the following code to achieve this.
-
<style>
/* Hide Element on Desktop */
@media screen and (min-width: 736px) {
#gallery01 {
display: none;
}
}/* Hide Element on Mobile */
@media screen and (max-width: 736px) {
#container03, #icons01 {
display: none;
}
}
</style>736px is a common breakpoint between desktop and mobile devices, but you can set it to any value you prefer.

• ▲ Collapse

• Quickly Find Fonts & Icons ▼ 2025.08

When I first started using Carrd, one thing bothered me: it took a long time to scroll just to find the font or icon I wanted.
Later I realized you can simply type the beginning letter of the font or icon name after the list appears—making the search much faster.

• ▲ Collapse

• Set Tooltip for Desktop Devices ▼ 2025.08

const element = document.querySelector('#text38');
element.setAttribute('title', 'tooltip content... ...');
1. Here, we use JavaScript select the element with the ID text38 and store it in the variable element.
2. Then, we set its title attribute to the desired tooltip content using setAttribute.
3. The browser’s built-in behavior automatically displays a default tooltip when the user hovers over the element on a desktop device.
4. If you have a Carrd Pro Plus account, you can add an attribute directly in the element settings (gear icon), for example: title=your tooltip content

• ▲ Collapse

• Commonly Used CSS Properties ▼ 2025.08

#text01 {
opacity: 0.8;
padding: 0 0 1rem 1rem;
background-color: #216E5B;
border: 1px solid #FFFFFF;
border-radius: 0 0 16px 16px;
}1. Here, we're selecting the #text1 element as the target.
2. opacity accepts values from 0 (fully transparent) to 1 (fully opaque).
3. padding uses four values in the order: top, right, bottom, left.
4. Instead of a solid color, you can also use a gradient like: background: linear-gradient(90deg, #color1, #color2);
5. border combines thickness, style (e.g. solid), and color.
6. border-radius with four values sets the corner radius in this order: top-left, top-right, bottom-right, bottom-left.

• ▲ Collapse

• How to Select a Column in CSS ▼ 2025.08

#container22 > .wrapper > .inner > :nth-child(2) {
... ...
}1. Here, we’re selecting the second column inside #container22.
2. To target a different container or column, simply update the container ID and adjust the :nth-child() selector accordingly.

• ▲ Collapse

• Add a Class to an Element in JS ▼ 2025.07

icon.addEventListener('click', () => {
icon.classList.add('rotate');
});1. Assume you have already selected the icon element and want to add the rotate class when it’s clicked.
2. We use addEventListener to listen for the click event, and classList.add to add the rotate class.
3. You can also add browser:none to the icon in Carrd’s URL column.

• ▲ Collapse

• Selecting an Element in JavaScript ▼ 2025.07

const icon = document.getElementById('icons01');1. The code on the right side of the equals sign selects an element by its ID. In this case, icons01 refers to the element's ID, which you can find in the gear icon settings.
2. The selected element is stored in the variable icon, so you can now use icon to reference that element in your code.

• ▲ Collapse

• Create a Column-Like Layout ▼ 2025.07

• ▲ Collapse

• Code Block Embed Position ▼ 2025.07

• ▲ Collapse