Free tools · no sign-in · kits for your own sites
Design tools for free. The whole library in one kit.
Search icons, build gradients and check color contrast without an account. Sign up for a kit and one line in your page serves every animation, pattern and free icon.
What you get
No account needed
Free tools, right in the browser
Everything here works signed out. Use them as often as you like.
- Free · no sign-in
Gradient generator
Linear, radial and conic gradients with draggable stops. Copy CSS with a fallback, or a Tailwind class.
Open the tool - Free · no sign-in
Color tools
Pick in HEX, RGB, HSL or OKLCH, build harmonies and 50–950 scales, and check WCAG and APCA contrast.
Open the tool - Free · no sign-in
Free icon search
Search every Font Awesome Free icon and copy an <i> tag, inline SVG or an <img> in one click.
Open the tool - Free · no sign-in
Pattern & animation preview
Try a hand-picked sample of patterns and animations live, then copy the snippet.
Open the tool
Kits · free with an account
Your whole library, one line
A kit is your own key to the CDN. Add it once and every animation, pattern and Font Awesome Free icon you chose is ready to use.
- One lineDrop the kit's script tag in your <head>, or link single files through the kit path.
- Locked to youEvery kit is locked to your domains, IP ranges or server use, so a copied token is useless elsewhere.
- Only what you pickChoose animations, patterns or icons per kit, with a monthly request cap you set.
- Revoke any timeUp to 10 kits per account. Rotate or revoke one from your dashboard in a click.
<!-- in <head>: one line for the whole kit -->
<script src="https://cdn.htmltool.io/kit/YOUR_KIT_TOKEN.js" crossorigin="anonymous" defer></script>
<!-- then use any class -->
<h1 class="da-fade-in-up">Hello</h1>
<section class="dp-seigaiha">…</section>Press C while the code is focused to copy.
Example locks
- example.com
- *.example.com
- http://localhost:3000
- 203.0.113.0/24
Requests from anywhere else are refused at the CDN. Kits never include Font Awesome Pro.
Free vs account
Start free. Sign in for the rest.
The tools stay free with no sign-in. A free account opens the full libraries and gives you kits.
| Feature | Free toolsNo sign-in | AccountFree |
|---|---|---|
| Gradient generator | ||
| Color picker, palettes and contrast checker | ||
| Font Awesome Free icon search (1,992 icons) | ||
| Pattern & animation previews | 12 + 12 samples | All 1,510 + 243 |
| Full galleries with timing, color and size controls | ||
| CDN kits locked to your domains or IPs | Up to 10 | |
| Favorites and collections | ||
| DevOps for Mac sign-in |
Free account
One account. Every library. Your own kit.
Sign up free. Open the full galleries, make a kit for your sites, and use the same account in DevOps for Mac.