Customizing Kagi CSS

Cascading Style Sheets (CSS) is a language used to stylize HTML elements in web pages. Using CSS, you can fully customize Kagi's search and landing pages from your Appearance settings.

Custom CSS does not apply to Settings pages, and is currently limited to 20,000 characters --- including whitespace.

Use the no_css query parameter (for example, kagi.com/search?q=test&no_css) to disable your custom CSS if something horribly breaks!

User Themes

Themes allow you to customize the look and feel of Kagi, enhancing your search experience with personalized colors, layouts, and styles. Our community has created and shared numerous themes, which you can explore on awesome-kagi-css or browse the selection below.

To apply a theme:

1. Choose a theme and click Get It.
2. Copy the CSS code.
3. Go to the Custom CSS page.
4. Ensure the Enable Custom CSS toggle is turned on.
5. Paste the copied code into the text area.
6. Click Apply Custom CSS.

Once applied, the theme will instantly update Kagi's appearance. You can switch themes at any time to find your perfect search interface.

Note: Some themes might work better with a certain Dark Mode or Light Mode default theme selected in the Appearance Settings page.

Kagi Courvix Dark

by Jeyso215

Get it

Dark Mustard

by Josh Ellington

Get it

---

Kagi Oranginum

by sefidel

Get it

---

Monokai Hack

by maxpl01t

Get it

---

Nocturnal

by Kel

Get it

---

Minimal Fav Color

by Matt Rangel

Get it

---

Kagi Mathiazom

by mathiazom

Get it

---

Kagi Google-Style

by neilio

Get it

---

Kagi Gruvbox Dark Theme

by auphone

Get it

---

Kagi Darker

by realrogue

Get it

---

Slimmed Down Theme

by rasti

Get it

    ._0_lenses .k_ui_dropdown {
      display: none;
    }
    ._0_lenses {
      display: none;
    }
    .serp_nav_end .k_ui_dropdown, .serp_nav_end .k_ui_dropdown_data_list {
      display: none;
    }
    .sri_more_menu_box .sri_more_menu {
      display: none;
    }
    .sidebar-filter-nav-form .sidebar-filter-nav {
      display: none;
    }
    ._0_queryInfo {
      display: none;
    }
    .top-panel {
    display: none;
    }
    ._0_item.n_ma{
    display: none;
    }
    .serp-nav{
    margin-left: 4px;
    }
    .search-result, .sri-group {
        margin-left: -17px;
        margin-right: -17px;
        padding: 15px;
        margin-bottom: 0px;
    border-bottom: 0px;
    }
    ._0_item.n_ne {
    display: none;
    }
    .m-h {
        padding: 0 10px;
        border-bottom: 0px solid var(--color-primary-dim_2);
    }

    .m-h .search-form-icons {
        display: none;
    }
    .theme_moon_dark {
    --search-result-title: #a0c5ff;
    --result-item-title-border: #141414;
    --background-color: #141414;
    --site_info_bottom_bg: #141414;
    }
    .theme_dark {
    --search-result-title: #a0c5ff;
    --result-item-title-border: #141414;
    --background-color: #141414;
    --site_info_bottom_bg: #141414;
    }
    .theme_calm_blue {
    --background-color: #f2f2f6
    }
    .sri-url .sri_url_path_box {
    }
    .sri-url .path {
        display: none;
    }
    .domain-favicon {
      display: none;
    }
    .m-h .m-h-i {
        height: 65px;
    }
    .crisp-edges {
        image-rendering: optimizespeed;
        image-rendering: crisp_edges;
    }
    .sri-desc {
        font-size: .88rem;
        line-height: 1.4;
    }

    .rewrite_icon {
        margin-left: 0px;
    }
    .m-image-domain {
        display: none;
    }
    .m-image-res {
        display: none;
    }
    .btn.--secondary-s, .ranked-item-tab-links a.--secondary-s {
        display: none;
    }
    .m-image-preview-buttons a i {
        display: none;
    }
    .m-image-preview-data-box span:first-child {
        display: none;
    }
    ._0_img-results .item img.fade {
        opacity: 0;
        transition: none;
    }
    .quick-search-btn {
        transition: transform .4s ease-in-out;
    }
    .d-info-box-title-header {
        height: 164px;
    }
    .videoResultItem .videoResultRight .videoResultDesc {
        display: none;
    }
    .instant-answer .ia-body .ia-title>div {
        display: none;
    }
    .inline-content+.search-result, .inline-content+.sri-group {
        border-top: 0px solid #a0c5ff
    }
    .instant-answer {
        padding-bottom: 13px;
        padding-top: 13px;
        border-top: 1px solid #a0c5ff;
        border-bottom: 1px solid #a0c5ff;
    }

---

Kagi Catppuccin Mocha

by jcrabapple

Get it

---

You can collaborate on themes on the Kagi Discord server or the community-managed subreddit.

Customizations

Apply the following custom CSS in your Appearance settings.

Remove Underlined Links

Remove the underline from links from Kagi search results page.

/* Remove bottom border from links */
.__sri_title_link._0_sri_title_link._0_URL {
  border-bottom: none;
}

/* Remove underline with nested links */
.__srgi-title a {
border-bottom: none; var(--result-item-title-border);
}

/* Remove underline with News module */
.newsResultItem .newsResultHeader .newsResultTitle a._0_TITLE {
  border-bottom: none; var(--result-item-title-border);
}

/* Remove underline from links in Wikipedia module */
.wikipediaResult a {
  border-bottom: none; var(--result-item-title-border);
}

Hide Quick Search button

Hide the floating Quick Search button from Kagi search results page.

.quick-search-btn {
  display: none;
}

Learn

If you want to learn more about how to customize your Kagi Search CSS, below is a video tutorial. The video features a slightly older design of Kagi Search, but the CSS principles are the same.

Also, here are some web resources about how to use CSS in general:

• MDN Web Docs
• W3Schools
• Khan Academy
• freeCodeCamp