https://github.com/hayayanai/inline-css-bits
A collection of copy-paste inline CSS effects for Markdown HTML.
https://github.com/hayayanai/inline-css-bits
css inline-css inline-styles
Last synced: 12 days ago
JSON representation
A collection of copy-paste inline CSS effects for Markdown HTML.
- Host: GitHub
- URL: https://github.com/hayayanai/inline-css-bits
- Owner: hayayanai
- License: other
- Created: 2026-02-19T00:52:57.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-02-26T22:22:24.000Z (about 2 months ago)
- Last Synced: 2026-02-27T04:41:26.819Z (about 2 months ago)
- Topics: css, inline-css, inline-styles
- Language: Astro
- Homepage: https://hayayanai.github.io/inline-css-bits/
- Size: 150 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# inline-css-bits
A collection of copy-paste inline CSS effects for Markdown HTML.
[](https://github.com/hayayanai/inline-css-bits/stargazers)
[](./LICENSE.md)
## Documentation
Visit [inline-css-bits](https://hayayanai.github.io/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 `` 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](https://hayayanai.github.io/inline-css-bits/), find an effect you like, and copy the code:
```html
<!-- 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](https://github.com/davidhdev/react-bits) and [Vue Bits](https://github.com/davidhdev/vue-bits) by [davidhdev](https://github.com/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](./LICENSE.md) (c) 2026 hayayanai