Edit Opacity

Name

Also known as (comma separated)

Brief definition Transparency.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "opacityPct", "type": "number", "label": "Opacity", "default": 60, "min": 0, "max": 100, "step": 5 }, { "id": "elementColor", "type": "color", "label": "Element colour", "default": "#241430", "presets": [ "#241430", "#E8A020", "#BFD9F2" ] }, { "id": "showBehind", "type": "toggle", "label": "Show a pattern behind it", "default": true }, { "id": "size", "type": "number", "label": "Size", "default": 90, "min": 50, "max": 130, "step": 10 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"op-wrap\">\n <div class=\"op-track\">\n {{#if showBehind}}<div class=\"op-behind\"></div>{{/if}}\n <div class=\"op-box\" style=\"width:{{size}}px;height:{{size}}px;background:{{elementColor}};opacity:calc({{opacityPct}} / 100);\"></div>\n </div>\n <p class=\"op-caption\">opacity: {{opacityPct}}%</p>\n</div>\n<style>\n.op-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }\n.op-track { position: relative; height: 130px; background: #FAF7F2; border: 1.5px dashed #24143055; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; }\n.op-behind { position: absolute; width: 60px; height: 60px; background: repeating-linear-gradient(45deg, #E8A020, #E8A020 6px, transparent 6px, transparent 12px); border-radius: 8px; }\n.op-box { position: relative; border-radius: 10px; }\n.op-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[300px]\">\n <div class=\"relative h-[130px] bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143055] rounded-lg flex items-center justify-center overflow-hidden\">\n {{#if showBehind}}<div class=\"absolute w-[60px] h-[60px] rounded-lg\" style=\"background:repeating-linear-gradient(45deg,#E8A020,#E8A020 6px,transparent 6px,transparent 12px);\"></div>{{/if}}\n <div class=\"relative rounded-[10px]\" style=\"width:{{size}}px;height:{{size}}px;background:{{elementColor}};opacity:calc({{opacityPct}} / 100);\"></div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">opacity: {{opacityPct}}%</p>\n</div>", "react": "export function Opacity({\n opacityPct = {{opacityPct}},\n elementColor = \"{{elementColor}}\",\n showBehind = {{showBehind}},\n size = {{size}},\n}) {\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 300 }}>\n <div style={{ position: \"relative\", height: 130, background: \"#FAF7F2\", border: \"1.5px dashed #24143055\", borderRadius: 8, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", overflow: \"hidden\" }}>\n {showBehind && (\n <div style={{ position: \"absolute\", width: 60, height: 60, borderRadius: 8,\n background: \"repeating-linear-gradient(45deg, #E8A020, #E8A020 6px, transparent 6px, transparent 12px)\" }} />\n )}\n <div style={{ position: \"relative\", width: size, height: size, background: elementColor, opacity: opacityPct / 100, borderRadius: 10 }} />\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>opacity: {opacityPct}%</p>\n </div>\n );\n}" }