Home
About Contact

CSS LIBRARY

A centralized collection of production-ready CSS and JavaScript snippets optimized for Kajabi.

CSS CODE
JAVASCRIPT CODE
ANIMATON CODE
 

CSS code's:

 
Colored Bar Behind Text
.bar { display: inline; background-image: linear-gradient( to bottom, transparent 0% 30%, #ff9797 30% 100% ); }

Paste inside Page Settings → Custom Code → Custom CSS

 

How this works (Click to expand)

.bar is a custom class.

The gradient creates a highlight effect behind inline text.

transparent 0% 30% controls where the highlight starts.

#ff9797 is the highlight color (change to any hex).

To use it:

<span class="bar">YOUR TEXT</span>

 

All Capital Letters
.uppercase { text-transform: uppercase; }

Paste inside Page Settings → Custom Code → Custom CSS

 

How this works (Click to expand)

text-transform: uppercase; forces text to display in all caps.

To apply it:

<span class="uppercase">YOUR TEXT</span>

 

Change Button Font
.btn, .form-btn { font-family: 'Domine', Domine; }

Paste inside Page Settings → Custom Code → Custom CSS

 

How this works (Click to expand)

This targets Kajabi’s default button classes.

Replace 'Domine' with your custom font.

If your font has spaces:

'Times New Roman', Times-New-Roman, Times New Roman

 

Add Shadow To Text
.main-shadow { text-shadow: 1px 1px 2px black; }

Paste inside Page Settings → Custom Code → Custom CSS

 

 

How this works (Click to expand)

text-shadow adds depth behind text.

Format:

horizontal-offset vertical-offset blur-radius color

To apply:

<p class="main-shadow">Your text</p>

 

 

Striked Price Layout
<strike>€107</strike><br> <span style="color: green; font-size: 45px;">€67</span>

Paste inside Pricing Card → Price Field (Source Code Mode)

 

How this works (Click to expand)

<strike> creates the crossed-out original price.

The <span> below displays the discounted price.

You can change:

  • Color
  • Font size
  • Currency

 

Adjust Countdown Sizing
.countdown__number { font-size: 3rem; } .countdown__label { font-size: 16px; display: flex; justify-content: center; }

Paste inside Page Settings → Custom Code → Custom CSS

 

How this works (Click to expand)

.countdown__number controls the timer numbers.

.countdown__label controls text below numbers.

Increase or decrease font-size as needed.

3rem can be changed to 2rem, 4rem, etc.

 

Payment Provider Icons
<p> <img src="https://i.ibb.co/tMfzj2mW/Copy-of-Checkout-Page-icon-shaded.png" alt="payment-icons"> </p>

Paste inside Offers Checkout → Source Code (<>) Area

 

How this works (Click to expand)

This inserts an image of payment provider icons.

You can replace the image URL with your own uploaded icon set.

Usually placed below disclaimers on checkout pages.

 

Clean Responsive Main Banner

 

Click to view full code
<span class="banner_1">REGISTRATIONS CLOSE SOON</span> <style> .banner_1 { font-weight: bold; color: white; font-size: clamp(18px, 2.5vw, 24px); } </style>

 

Add a Custom Code section → Paste entire snippet

 

How this works (Click to expand)

clamp() makes font responsive.

First value = minimum size.

Second = responsive scaling.

Third = maximum size.

You can change text color and font-size.

 

Gradient Effect on Title
h1.gradient-title, h2.gradient-title { background: linear-gradient(90deg, #bfcac2, #445871); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

Paste inside Page Settings → Custom Code → Custom CSS

 

How this works (Click to expand)

This applies a gradient to text instead of solid color.

Use this in your title:

<h1 class="gradient-title">Your Title</h1>

You can change the gradient colors.

 

Shadowed CTA Button
.cta-01 { display: inline-flex; align-items: center; justify-content: center; padding: 20px 36px; border-radius: 999px; background: #6E8F86; color: #ffffff !important; font-size: 22px; font-weight: 700; text-decoration: none !important; box-shadow: inset 0 3px 8px rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.08); }

Paste inside Page Settings → Custom Code → Custom CSS

 

How this works (Click to expand)

This creates a rounded CTA button with inner glow.

To use:

<a href="YOUR LINK" class="cta-01">
Join the Community
</a>

Change background color to match branding.

 

Custom Font Upload (Advanced)

 

Click to view full code
@font-face { font-family: 'Heading Font'; src: url('PASTE-FONT-URL-HERE.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Body Font'; src: url('PASTE-FONT-URL-HERE.ttf') format('truetype'); font-weight: normal; font-style: normal; } h1, h2, h3, h4, h5, h6 { font-family: 'Heading Font', serif !important; } p, li, a { font-family: 'Body Font', sans-serif !important; }

 

Paste inside Page Settings → Custom Code → Custom CSS

 

How this works (Click to expand)

Upload font file via temporary Download button.

Right-click → Copy Link Address.

Replace PASTE-FONT-URL-HERE with that link.

Change font-family names accordingly.
For more information click here 

 

Module / Testimonial Carousel
.carousel-wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .carousel-item { flex: 0 0 80%; margin-right: 20px; scroll-snap-align: start; }

Paste inside Page Settings → Custom Code → Custom CSS

 

How this works (Click to expand)

This creates a horizontal scroll carousel.

Each item snaps into place.

Works well for modules or testimonials.

 

Remove “Powered by Kajabi”
.powered-by { display: none !important; }

Paste inside Page Settings → Custom Code → Custom CSS

 

How this works (Click to expand)

Targets Kajabi footer branding element.

!important forces override.

 

Change Button Font
.btn, .form-btn { font-family: 'Your Font Name', sans-serif !important; }

Paste inside Page Settings → Custom Code → Custom CSS

 

How this works (Click to expand)

Overrides Kajabi button typography.

Replace font name with your uploaded font.

 

Gradient Title (Global)
h1, h2 { background: linear-gradient(90deg, #bfcac2, #445871); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

Paste inside Page Settings → Custom Code → Custom CSS

 

How this works (Click to expand)

Applies gradient to all H1 & H2 titles globally.

Change gradient colors to match branding.

 

 

JAVASCRIPT code's:

 
WL Dynamic Banner
<script> document.addEventListener("DOMContentLoaded", () => { const map = { wl: "SPECIAL WAITING LIST DISCOUNT - $100 OFF", web: "FREE CLASS REGISTRANTS DISCOUNT - $100 OFF", ps: "SPECIAL STUDENTS DISCOUNT - $100 OFF", ti: "SPECIAL INSTALLMENT OFFER", }; document.querySelectorAll(".banner_2").forEach(el => { const key = el.dataset.key; if (map[key]) el.textContent = map[key]; }); }); </script>

Paste inside Page Settings → Custom Code → Footer

 

How this works (Click to expand)

This script changes banner text based on data-key.

Example usage:

<span class="banner_2" data-key="wl"></span>

Change data-key to: wl, web, ps, or ti.

 

WL Icons Section (Lucide)

 

Click to view full code
<div class="features-icons"> <i data-lucide="book-open-text"></i> <strong>8 modules</strong> with lessons </div> <script src="https://unpkg.com/lucide@latest"></script> <script> lucide.createIcons({ attrs: { width: 28, height: 28, stroke: "#2E8B57", "stroke-width": 2 } }); </script>

 

Paste inside Custom Code section

 

How this works (Click to expand)

This loads Lucide icon library.

Change icon name inside data-lucide.

Modify width, height, and stroke color inside script.

 

Social Proof Carousel

 

Click to view full code
<div class="as-seen-on-carousel"> <div class="carousel-track"> <img src="PASTE-IMAGE-LINK"> <img src="PASTE-IMAGE-LINK"> <img src="PASTE-IMAGE-LINK"> </div> </div> <style> .as-seen-on-carousel { overflow: hidden; } .carousel-track { display: flex; gap: 40px; animation: scroll-logos 25s linear infinite; } @keyframes scroll-logos { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } </style>

 

Add Custom Code section → Paste entire snippet

 

How this works (Click to expand)

This creates a continuously scrolling logo carousel.

Duplicate logos for seamless loop.

Replace image links with your own.

For more information watch this loom: click here

 

 

ANIMATION code's:

 
Animated Gradient CTA
.btn { position: relative; background: linear-gradient(90deg, #f97316, #ec4899, #8b5cf6); background-size: 300% 300%; color: #ffffff !important; border: none !important; border-radius: 999px !important; padding: 14px 28px !important; font-weight: 600; transition: transform 0.25s ease; animation: gradientMove 6s ease infinite; } .btn:hover { transform: translateY(-2px); } @keyframes gradientMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

Paste inside Page Settings → Custom Code → Custom CSS

 

How this works (Click to expand)

This animates Kajabi CTA buttons using a moving gradient.

background-size: 300% allows smooth movement.

@keyframes controls the animation cycle.

Change gradient colors to match branding.

 

Clean Responsive Countdown
.block-type--countdown div { padding: 0 !important; overflow: visible !important; } .countdown__number { font-size: clamp(35px, 4vw, 45px); font-weight: bold; text-align: center; } .countdown__label { font-size: clamp(10px, 1.5vw, 12px); text-align: center; } .countdown__boxed { flex-wrap: nowrap; gap: 5px; }

Paste inside Page Settings → Custom Code → Custom CSS

 

How this works (Click to expand)

clamp() makes numbers scale automatically.

Removes extra padding from Kajabi default layout.

Keeps timer aligned and responsive.