:root{
--p-bg:#0f1115;
--card:#1a1714e6;
--muted:#718096;
--p-text:#eef2f7;
--brand:#353a3e;
--border:rgba(255,255,255,.08);
--focus:rgba(255,255,255,.22);
--radius:16px;
}
/* Font cycling animation */
@keyframes font-rotate {
0%, 16% {
font-family: Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
20%, 36% {
font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
40%, 56% {
font-family: Georgia, "Times New Roman", Times, serif;
}
60%, 76% {
font-family: "Times New Roman", Times, serif;
}
80%, 96% {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
100% {
font-family: Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
}
/* Apply it */
.font-rotate {
animation: font-rotate 8s steps(1, end) infinite;
will-change: font-family;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.font-rotate { animation: none; }
}
/* Layout */
.p-body{color:var(--p-text);margin:0;font:16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.wrap{margin:0 auto;padding:32px 20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;margin:22px 0}
h1,h2,h3{line-height:1.15;margin:0 0 .5rem}
p{margin:.6rem 0 1rem;color:#d8dee9}
.muted{color:var(--muted)}
.lead{font-size:1.05rem}
.section{margin:30px 0}
/* Header showcase */
.hero{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:.6rem}
.hero .tag{display:inline-block;font-size:.9rem;padding:.2rem .55rem;border:1px solid var(--border);border-radius:999px;color:var(--muted)}
.title{font-size:clamp(32px,6vw,64px);font-weight:800;letter-spacing:-.02em;margin:.4rem 0 0}
.title span{display:inline-block;white-space:nowrap}
/* "Colours!" */
.title .colors{animation:huecycle 8s linear infinite;filter:saturate(1.1)}
@keyframes huecycle{from{filter:hue-rotate(0)}to{filter:hue-rotate(360deg)}}
/* "Gradients!" */
.title .gradients{
background:linear-gradient(90deg,#ffb86c,#ff6a88,#8be9fd,#50fa7b,#ffb86c);
-webkit-background-clip:text;background-clip:text;color:transparent;
background-size:300% 100%;animation:slidegrad 8s linear infinite;
}
@keyframes slidegrad{0%{background-position:0 0}100%{background-position:300% 0}}
/* "Fonts!" */
.title .fonts{font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
/* Demo blocks */
.demo-block{padding:22px;border:1px dashed var(--border);border-radius:12px;background:rgba(255,255,255,.02);margin-top:14px}
.demo-title{font-size:.95rem;color:var(--muted);margin-bottom:.25rem}
.demo-text{font-weight:800;letter-spacing:-.02em;line-height:1.1;font-size:clamp(28px,4.6vw,48px);margin:.2rem 0 .6rem}
/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{
appearance:none;border:1px solid var(--border);background:#353a3e;color:var(--p-text);
border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer;min-width:130px;
transition:transform .06s ease, background .2s ease, border-color .2s ease;
}
.btn:focus-visible{outline:0;box-shadow:0 0 0 4px var(--focus)}
.btn:hover{background:#202534;border-color:#2a3140}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
/* Swatches */
.btn.swatch{display:flex;align-items:center;gap:10px;min-width:140px}
.dot{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.3);flex:0 0 18px}
.gdot{width:46px;height:18px;border-radius:999px;border:1px solid rgba(255,255,255,.3);flex:0 0 46px}
/* Font list grid */
.font-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:12px}
.font-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#353a3e}
.font-name{font-size:.95rem}
.font-sample{opacity:.85;font-size:.95rem;margin-left:auto}
/* Responsive table example */
.table-blurb{margin-top:10px}
.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px}
table{width:100%;border-collapse:collapse;min-width:720px;background:#353a3e}
th,td{padding:12px 14px;border-bottom:1px solid #222636;text-align:left}
th{background:#757f87;color:#cfd6e4;font-weight:700;position:sticky;top:0}
tr:hover td{background:#202534}
@media (max-width:768px){th,td{padding:10px}}
/* Small helpers */
.kbd{font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#0e1118;border:1px solid #2a3140;border-bottom-color:#1f2633;border-radius:6px;padding:2px 6px}
Web Update
Colours! Gradients! Fonts!
I rebuilt text styling tools. The old color picker and font tools felt outdated. Now you get a color text picker with an eyedropper, true per-character gradients, and a practical font browser. I also added responsive tables that stop hard-coded widths from breaking layouts. Oh and @Daisy updated the total upload file size to 50mb. Below is a simple live preview for each new feature.
(Slight Catch, you have to click twice on the button the first time you open the editor, to load the functionality.
That is the way Invision Community is unfortunately, hopefully can fix in the future)
Text Colour
The new color picker focuses on speed. You get a palette, a recents row, an eyedropper that can sample any on-screen color, and typed hex input. It writes simple inline color. It also clears color, and it only changes your highlighted text.
Try it
This text changes color.
RedOrangeCyanIndigoPurple
Gradient Colour
Gradient text has been a long standing need. Before, people colored each letter by hand. Now you choose stops, use presets, reverse, randomize, and apply per-character color in one click. It avoids breaking markup, and clearing restores plain text. It can also skips whitespace for clean results. You can choose between 2-5 stops in your gradient text!
Try it
This text gets a gradient.
WarmAquaVioletCoralLime
Font Picker
Fonts are organized by family. You can search, and apply either inline font-family. Clearing removes only font styling and unwraps empty spans. Currently the preview is not working on all devices, this is because of the way the editor is handling fonts, I am looking for a fix. These are all the new fonts added in this update:
ArialAa Bb 123
InterAa Bb 123
PoppinsAa Bb 123
Open SansAa Bb 123
VerdanaAa Bb 123
TahomaAa Bb 123
Trebuchet MSAa Bb 123
Lucida SansAa Bb 123
Century GothicAa Bb 123
GeorgiaAa Bb 123
Times New RomanAa Bb 123
GaramondAa Bb 123
PalatinoAa Bb 123
MerriweatherAa Bb 123
ImpactAa Bb 123
CopperplateAa Bb 123
Comic Sans MSAa Bb 123
Brush Script MTAa Bb 123
PapyrusAa Bb 123
MonospaceAa Bb 123
Courier NewAa Bb 123
Lucida ConsoleAa Bb 123
Try it
This text changes font.
InterPoppinsGeorgiaTimes New RomanMonospace
Responsive Tables
Tables now ignore fixed widths from pasted content from google docs or word. The plugin strips width/height on tables, rows, and cells, removes <colgroup>, and forces fluid layout with table-layout: fixed. On small screens, long rows stay readable with horizontal scroll, instead of blowing up the page. This means that table formatting should no longer break on mobile devices or narrow windows.
Updated Upload Limit to 50mb
Yes, you can now upload up to 50mb files and images in your posts! Huge.
Note: This page is a minimal live preview. The actual plugins run inside the Editor.
Cheers,
- xDK