Ankineer CSS Studio — Style Any Card Without CSS

🎨 Ankineer CSS Studio — make every card beautiful, without writing a single line of CSS

Anki cards are styled with CSS… but nobody wants to learn CSS to change a font or a color.
Ankineer CSS Studio gives you a visual editor: pick a field, tick the options you want, watch the live preview, click Apply. The add-on writes the CSS and the HTML class into your note type for you.

🎬 Video guide: youtube.com/@TheAnkineer

🚀 How to use

1. Install with the code above and restart Anki.
2. Open Tools › Ankineer CSS Studio (it opens full screen).
3. Choose a note type, then a field — or 🃏 Whole card.
4. Tick options in the tabs and look at the preview.
5. Click Apply to note type, or switch on ⚡ Auto-inject to save every change automatically.

🧰 62 options in 7 tabs — each with a list of ready choices

• Text — font, size, weight, italic, color, letter case, alignment, line height, letter & word spacing, underline styles, text shadow, gradient text
• Box — background color or gradient, opacity, width, padding, margin, border (or a colored accent bar), rounded corners, shadow, glass blur
• Inside — style what is inside the field: bold (marker, pill, glow…), italic, underline, cloze, links, list bullets (✓ ➜ ★), tables, inline code
• Images — size, position (center, float with text around it), corners, border, shadow, filters, hover zoom, and night-mode invert for black-on-white diagrams
• Motion — hover effects and 11 entrance animations
• Night & code — separate night-mode colors, your own extra CSS, front/back injection
• Card only — the answer divider line, content width, vertical centering

✨ Features

• Live preview of a sample field or of your real card (front or back), with night mode.
• 📱 Phone & tablet preview in a device frame — and a mobile-only style: change the size or spacing only on AnkiDroid / AnkiMobile.
• 🎯 Click-to-select: click a field in the preview to edit it.
• Existing CSS detected: the add-on tells you first, shows the active options in green, and replaces the old CSS only when you apply. Remove the style and the old CSS comes back.
• 🔤 122 fonts included (sans, serif, display, handwriting, code, Arabic, plus free look-alikes of Arial, Times, Calibri…). They are copied into your media, so they work on every device after sync. ＋ Google Font adds any other font from fonts.google.com.
• 📋 Copy a style to other fields or note types in one click.
• Safe: a backup of the note type is saved before it is changed; only the field you choose is touched.

📝 Changelog

V1 — First public release.

Requires Anki 2.1.50 or newer (desktop). The styled cards work on AnkiWeb, AnkiDroid and AnkiMobile. Fonts: Google Fonts, SIL Open Font License. The only network request is the optional “＋ Google Font” download.

❤️ Free add-on by Ankineer · YouTube: @TheAnkineer · Support: buymeacoffee.com/ankineer
Ideas or a bug? Leave a comment on the YouTube video — please don't use a negative review to report a bug, I can't reply there.