Enhance your Kagi search experience with custom CSS animations and styles! It's a general overhaul of the search engine user interface and user experience.
kagi-css is a custom CSS file to beautify and liven up the Kagi search engine interface. With this stylesheet, you can enjoy a more visually appealing and dynamic search experience while using Kagi. Mainly inspired by Google and Brave Search, but with many exciting innovations of its own!
- Glassmorphism: A glass-inspired design for the settings and navigation bar
- Documentation: This css file has been documented quite accurately, which is why it is relatively easy to make changes
- Custom Animations: Smooth transitions and eye-catching effects
- Enhanced UI Elements: Improved buttons, search bar, and results layout
- Responsive Design: Looks great on both desktop and mobile devices
- Easy color changes: There is a field at the beginning where you can easily change the most important colors as you wish
- Uniform Design: The design now extends to almost all pages, be it results, images, videos, news or podcasts.
Due to character limitations on Kagi, there might be issues when inserting the entire CSS file. Therefore, the file has been split into several smaller files.
Please choose what you need. Three add-ins were created since these pages are accessed less frequently.
If you prefer an all-in-one solution, then select the standard custom.css, which includes the most important elements of all pages.
Otherwise, choose your add-in, copy the entire text from the CSS file, and simply paste it into a new line in the input field on Kagi. The following add-ins are available:
- video-section-addin.css: For the "Video" tab
- podcast-section-addin.css: For the "Podcast" tab
- news-section-addin.css: For the "News" tab
Currently, it's not possible to use all add-ins simultaneously! The main search page includes all content in the all-in-one solution as well.
- Download the
custom.cssfile from this repository. - Enable custom CSS in Kagi Settings.
- Paste the code into the inputfield at: Link
- Save and enjoy your enhanced Kagi experience!
optional: It is intended that the "URL Placement” setting will be set to “Above Title” under the “Appearance” item.
kagi-css includes several animations to make your search experience more dynamic:
- Results Fade-In: Search results smoothly fade in as they load.
- Hover Effects: Buttons and links have pleasant hover transitions.
- Search Tiles: Also have beautiful animations.
The latest update has given the "Quick-Answer" a visual improvement. Here’s a preview:
If you have an idea that would extend / complete the look of Kagi or if you have found a bug, please write to me on Discord or write in Discord: kagi-discussions -> “UI Design Ideas for my custom css”. Link