A Shortcut That Generates Inline CSS for Gradient Text Colors
Sometimes, you want text to stand out more than the standard bold or even highlight styles. Make it fun with gradients!
If you use a Markdown editor like Obsidian or iA Writer, you can see rendered HTML and CSS in the app's preview (and, in the case of Obsidian, the editor's Live Preview mode). That means you can supplement the standard Markdown formatting (bold, italic, etc.) with colorful gradient text. (It pops even more in dark mode.)
To do this easily in Obsidian, I created a shortcut for iOS and Mac that uses (from the third-party Actions app) to generate two random colors and fill them in to the appropriate <span> element. It also automatically uses <strong> tags to make the gradient bold—all the better to enjoy it.
Generate Inline CSS for Gradient Text - Shortcuts
You can tweak this shortcut for your own needs.
• For example, I include the Replace Text action to remove the placeholder text when using the Shortcut Launcher plugin (Direct install link: Obsidian) without providing any text input. It doesn't affect the shortcut if you're not using Obsidian or that plugin, but you can remove it if you'd like.
Some ideas I have that I'll try if I find the time:
• Allow a choice of initial colors instead of always generating random ones (would require another third-party app to provide the necessary action).
• Allow selection from multiple color options at once instead of requiring you to re-run the shortcut for a new combo.
• Allow you to flip the gradient direction without changing the colors.
If you build on this shortcut to make it even better, let me know on Mastodon or Twitter!
📱