inline-css-bits

A collection of copy-paste inline CSS effects for Markdown HTML.

Documentation

Visit inline-css-bits to browse all effects with live previews.

About

inline-css-bits is a showcase of inline CSS effects that work solely via style="" attributes — no <style> tags or <script> needed.

Every effect is designed to be copied and pasted directly into Markdown HTML, making it perfect for README files, GitHub Pages, blog posts, and anywhere that supports inline HTML.

Note: Although this site is built with Astro, this project is not an Astro port of React Bits or Vue Bits. inline-css-bits is an independent project focused specifically on inline style="" effects for Markdown HTML.

Key Features

• 55+ Effects — Text effects, backgrounds, and UI components across 3 categories
• Copy & Paste — Just copy an effect and paste it into your HTML. No setup required
• Zero Dependencies — Everything works with just the style="" attribute
• Customizable — Tweak colors, sizes, and values directly in the inline styles

Usage

Browse the documentation site, find an effect you like, and copy the code:

<!-- Example: Neon Glow text -->
<span
  style="color:#0ff;text-shadow:0 0 7px #0ff,0 0 10px #0ff,0 0 21px #0ff,0 0 42px #0ff"
>
  Neon Glow
</span>

Paste it into any Markdown file or HTML document. That's it.

Development Commands

• pnpm dev — Start local dev server
• pnpm build — Build static site
• pnpm lint — Run oxlint
• pnpm format — Format the repository with Prettier
• pnpm format:check — Check formatting in CI/local

Credit

This project is heavily inspired by React Bits and Vue Bits by davidhdev. The site structure and concept of providing copy-paste ready effects are based on their excellent work.

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

License

MIT + Commons Clause (c) 2026 hayayanai