<style> /* Reset and base styles with high specificity */<br /> .ccpg-root,<br /> .ccpg-root *,<br /> .ccpg-root *::before,<br /> .ccpg-root *::after {<br /> box-sizing: border-box !important;<br /> margin: 0 !important;<br /> padding: 0 !important;<br /> font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;<br /> line-height: 1.5 !important;<br /> }<br /> .ccpg-root {<br /> --ccpg-primary: #4150F6 !important;<br /> --ccpg-primary-light: #6370f8 !important;<br /> --ccpg-primary-dark: #3040d4 !important;<br /> --ccpg-primary-bg: rgba(65, 80, 246, 0.08) !important;<br /> --ccpg-bg: #ffffff !important;<br /> --ccpg-surface: #f8f9fc !important;<br /> --ccpg-border: #e2e5f1 !important;<br /> --ccpg-text: #1a1d2d !important;<br /> --ccpg-text-muted: #6b7280 !important;<br /> --ccpg-success: #10b981 !important;<br /> --ccpg-shadow: 0 4px 24px rgba(65, 80, 246, 0.12) !important;<br /> --ccpg-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06) !important;<br /> --ccpg-radius: 12px !important;<br /> --ccpg-radius-sm: 8px !important;<br /> --ccpg-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;<br /> width: 100% !important;<br /> max-width: 1280px !important;<br /> background: var(--ccpg-bg) !important;<br /> border-radius: var(--ccpg-radius) !important;<br /> box-shadow: var(--ccpg-shadow) !important;<br /> overflow: hidden !important;<br /> display: flex !important;<br /> flex-direction: column !important;<br /> }<br /> .ccpg-container {<br /> display: grid !important;<br /> grid-template-columns: 320px 1fr !important;<br /> gap: 0 !important;<br /> flex: 1 !important;<br /> overflow: hidden !important;<br /> }<br /> /* Controls Panel */<br /> .ccpg-controls {<br /> background: var(--ccpg-surface) !important;<br /> padding: 16px !important;<br /> border-right: 1px solid var(--ccpg-border) !important;<br /> overflow-y: auto !important;<br /> display: flex !important;<br /> flex-direction: column !important;<br /> gap: 14px !important;<br /> }<br /> .ccpg-section-title {<br /> font-size: 11px !important;<br /> font-weight: 600 !important;<br /> text-transform: uppercase !important;<br /> letter-spacing: 0.5px !important;<br /> color: var(--ccpg-text-muted) !important;<br /> margin-bottom: 8px !important;<br /> }<br /> /* Shape Presets Grid */<br /> .ccpg-preset-grid {<br /> display: grid !important;<br /> grid-template-columns: repeat(5, 1fr) !important;<br /> gap: 6px !important;<br /> max-height: 280px !important;<br /> overflow-y: auto !important;<br /> padding: 4px !important;<br /> }<br /> .ccpg-preset-btn {<br /> position: relative !important;<br /> width: 100% !important;<br /> aspect-ratio: 1 !important;<br /> border: 2px solid var(--ccpg-border) !important;<br /> border-radius: var(--ccpg-radius-sm) !important;<br /> background: var(--ccpg-bg) !important;<br /> cursor: pointer !important;<br /> transition: var(--ccpg-transition) !important;<br /> display: flex !important;<br /> flex-direction: column !important;<br /> align-items: center !important;<br /> justify-content: center !important;<br /> gap: 2px !important;<br /> padding: 4px !important;<br /> }<br /> .ccpg-preset-btn:hover {<br /> border-color: var(--ccpg-primary-light) !important;<br /> background: var(--ccpg-primary-bg) !important;<br /> transform: scale(1.05) !important;<br /> }<br /> .ccpg-preset-btn.ccpg-active {<br /> border-color: var(--ccpg-primary) !important;<br /> background: var(--ccpg-primary-bg) !important;<br /> box-shadow: 0 2px 8px rgba(65, 80, 246, 0.25) !important;<br /> }<br /> .ccpg-preset-icon {<br /> width: 28px !important;<br /> height: 28px !important;<br /> fill: var(--ccpg-primary) !important;<br /> transition: var(--ccpg-transition) !important;<br /> }<br /> .ccpg-preset-btn:hover .ccpg-preset-icon,<br /> .ccpg-preset-btn.ccpg-active .ccpg-preset-icon {<br /> fill: var(--ccpg-primary-dark) !important;<br /> }<br /> .ccpg-preset-label {<br /> font-size: 8px !important;<br /> font-weight: 500 !important;<br /> color: var(--ccpg-text-muted) !important;<br /> text-align: center !important;<br /> line-height: 1.2 !important;<br /> white-space: nowrap !important;<br /> overflow: hidden !important;<br /> text-overflow: ellipsis !important;<br /> max-width: 100% !important;<br /> }<br /> .ccpg-preset-btn.ccpg-active .ccpg-preset-label {<br /> color: var(--ccpg-primary) !important;<br /> font-weight: 600 !important;<br /> }<br /> /* Image URL Input */<br /> .ccpg-input-group {<br /> display: flex !important;<br /> flex-direction: column !important;<br /> gap: 6px !important;<br /> }<br /> .ccpg-input {<br /> width: 100% !important;<br /> padding: 10px 12px !important;<br /> border: 2px solid var(--ccpg-border) !important;<br /> border-radius: var(--ccpg-radius-sm) !important;<br /> font-size: 12px !important;<br /> color: var(--ccpg-text) !important;<br /> background: var(--ccpg-bg) !important;<br /> transition: var(--ccpg-transition) !important;<br /> outline: none !important;<br /> }<br /> .ccpg-input:focus {<br /> border-color: var(--ccpg-primary) !important;<br /> box-shadow: 0 0 0 3px var(--ccpg-primary-bg) !important;<br /> }<br /> .ccpg-input::placeholder {<br /> color: var(--ccpg-text-muted) !important;<br /> }<br /> /* Preview Panel */<br /> .ccpg-preview-panel {<br /> padding: 16px !important;<br /> display: flex !important;<br /> flex-direction: column !important;<br /> gap: 12px !important;<br /> background: var(--ccpg-bg) !important;<br /> overflow: hidden !important;<br /> }<br /> .ccpg-preview-header {<br /> display: flex !important;<br /> align-items: center !important;<br /> justify-content: space-between !important;<br /> }<br /> .ccpg-preview-title {<br /> font-size: 14px !important;<br /> font-weight: 600 !important;<br /> color: var(--ccpg-text) !important;<br /> }<br /> .ccpg-edit-hint {<br /> font-size: 11px !important;<br /> color: var(--ccpg-text-muted) !important;<br /> background: var(--ccpg-primary-bg) !important;<br /> padding: 4px 10px !important;<br /> border-radius: 20px !important;<br /> }<br /> .ccpg-preview-wrapper {<br /> position: relative !important;<br /> flex: 1 !important;<br /> display: flex !important;<br /> align-items: center !important;<br /> justify-content: center !important;<br /> background:<br /> linear-gradient(45deg, #f0f0f0 25%, transparent 25%),<br /> linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),<br /> linear-gradient(45deg, transparent 75%, #f0f0f0 75%),<br /> linear-gradient(-45deg, transparent 75%, #f0f0f0 75%) !important;<br /> background-size: 16px 16px !important;<br /> background-position: 0 0, 0 8px, 8px -8px, -8px 0px !important;<br /> border-radius: var(--ccpg-radius) !important;<br /> border: 2px dashed var(--ccpg-border) !important;<br /> min-height: 250px !important;<br /> overflow: visible !important;<br /> }<br /> .ccpg-preview-container {<br /> position: relative !important;<br /> width: 280px !important;<br /> height: 200px !important;<br /> }<br /> .ccpg-preview-image {<br /> width: 100% !important;<br /> height: 100% !important;<br /> object-fit: cover !important;<br /> transition: clip-path 0.15s ease !important;<br /> }<br /> /* Draggable Points Overlay */<br /> .ccpg-points-overlay {<br /> position: absolute !important;<br /> top: 0 !important;<br /> left: 0 !important;<br /> width: 100% !important;<br /> height: 100% !important;<br /> pointer-events: none !important;<br /> }<br /> .ccpg-point {<br /> position: absolute !important;<br /> width: 14px !important;<br /> height: 14px !important;<br /> background: var(--ccpg-primary) !important;<br /> border: 2px solid #ffffff !important;<br /> border-radius: 50% !important;<br /> cursor: grab !important;<br /> pointer-events: auto !important;<br /> transform: translate(-50%, -50%) !important;<br /> box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;<br /> transition: transform 0.1s ease, box-shadow 0.1s ease !important;<br /> z-index: 10 !important;<br /> }<br /> .ccpg-point:hover {<br /> transform: translate(-50%, -50%) scale(1.3) !important;<br /> box-shadow: 0 3px 10px rgba(65, 80, 246, 0.5) !important;<br /> }<br /> .ccpg-point.ccpg-dragging {<br /> cursor: grabbing !important;<br /> transform: translate(-50%, -50%) scale(1.4) !important;<br /> box-shadow: 0 4px 14px rgba(65, 80, 246, 0.6) !important;<br /> }<br /> .ccpg-point-lines {<br /> position: absolute !important;<br /> top: 0 !important;<br /> left: 0 !important;<br /> width: 100% !important;<br /> height: 100% !important;<br /> pointer-events: none !important;<br /> }<br /> .ccpg-point-lines svg {<br /> width: 100% !important;<br /> height: 100% !important;<br /> }<br /> .ccpg-polygon-line {<br /> fill: none !important;<br /> stroke: var(--ccpg-primary) !important;<br /> stroke-width: 2 !important;<br /> stroke-dasharray: 4 4 !important;<br /> opacity: 0.6 !important;<br /> }<br /> /* Output Section */<br /> .ccpg-output-section {<br /> display: flex !important;<br /> flex-direction: column !important;<br /> gap: 8px !important;<br /> }<br /> .ccpg-code-container {<br /> position: relative !important;<br /> background: var(--ccpg-surface) !important;<br /> border-radius: var(--ccpg-radius-sm) !important;<br /> border: 1px solid var(--ccpg-border) !important;<br /> overflow: hidden !important;<br /> }<br /> .ccpg-code {<br /> width: 100% !important;<br /> padding: 12px 14px !important;<br /> font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;<br /> font-size: 12px !important;<br /> color: var(--ccpg-text) !important;<br /> background: transparent !important;<br /> border: none !important;<br /> resize: none !important;<br /> outline: none !important;<br /> min-height: 44px !important;<br /> }<br /> .ccpg-copy-btn {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> justify-content: center !important;<br /> gap: 8px !important;<br /> padding: 10px 20px !important;<br /> background: var(--ccpg-primary) !important;<br /> color: #ffffff !important;<br /> border: none !important;<br /> border-radius: var(--ccpg-radius-sm) !important;<br /> font-size: 13px !important;<br /> font-weight: 600 !important;<br /> cursor: pointer !important;<br /> transition: var(--ccpg-transition) !important;<br /> align-self: flex-start !important;<br /> }<br /> .ccpg-copy-btn:hover {<br /> background: var(--ccpg-primary-dark) !important;<br /> transform: translateY(-1px) !important;<br /> box-shadow: 0 6px 20px rgba(65, 80, 246, 0.35) !important;<br /> }<br /> .ccpg-copy-btn.ccpg-copied {<br /> background: var(--ccpg-success) !important;<br /> }<br /> .ccpg-copy-icon {<br /> width: 16px !important;<br /> height: 16px !important;<br /> }<br /> /* Mobile Responsive */<br /> @media screen and (max-width: 768px) {<br /> .ccpg-root {<br /> max-height: none !important;<br /> min-height: auto !important;<br /> }<br /> .ccpg-container {<br /> grid-template-columns: 1fr !important;<br /> }<br /> .ccpg-controls {<br /> border-right: none !important;<br /> border-bottom: 1px solid var(--ccpg-border) !important;<br /> max-height: 260px !important;<br /> overflow-y: auto !important;<br /> }<br /> .ccpg-preset-grid {<br /> grid-template-columns: repeat(6, 1fr) !important;<br /> max-height: 180px !important;<br /> }<br /> .ccpg-preview-wrapper {<br /> min-height: 180px !important;<br /> }<br /> .ccpg-preview-container {<br /> width: 220px !important;<br /> height: 160px !important;<br /> }<br /> }<br /> @media screen and (max-width: 480px) {<br /> .ccpg-root {<br /> border-radius: var(--ccpg-radius-sm) !important;<br /> }<br /> .ccpg-controls {<br /> padding: 12px !important;<br /> gap: 12px !important;<br /> }<br /> .ccpg-preview-panel {<br /> padding: 12px !important;<br /> }<br /> .ccpg-preset-grid {<br /> grid-template-columns: repeat(4, 1fr) !important;<br /> max-height: 140px !important;<br /> }<br /> .ccpg-preset-icon {<br /> width: 22px !important;<br /> height: 22px !important;<br /> }<br /> .ccpg-preset-label {<br /> font-size: 7px !important;<br /> }<br /> .ccpg-preview-container {<br /> width: 180px !important;<br /> height: 140px !important;<br /> }<br /> .ccpg-copy-btn {<br /> width: 100% !important;<br /> justify-content: center !important;<br /> }<br /> .ccpg-point {<br /> width: 18px !important;<br /> height: 18px !important;<br /> }<br /> }<br /> .brg-header {<br /> text-align: center !important;<br /> margin: 20px 0 !important;<br /> }<br /> .brg-title {<br /> font-size: 22px !important;<br /> font-weight: 700 !important;<br /> color: var(--brg-text) !important;<br /> margin-bottom: 4px !important;<br /> letter-spacing: -0.02em !important;<br /> }<br /> .brg-title span {<br /> color: #4150F6 !important;<br /> }<br /> .brg-subtitle {<br /> font-size: 15px !important;<br /> color: var(--brg-text-muted) !important;<br /> font-weight: 400 !important;<br /> }<br /> </style> <header> <h1>CSS Clip Path Generator</h1> Create shapes for pictures using the css clip path generator. Select from the polygon presets shapes or create a custom shape. </header><!-- Controls Panel --> Select Shape <!-- Presets will be generated by JS --> <!-- Custom Image URL --> Custom Image URL <input id="ccpg-image-url" type="url" placeholder="https://example.com/image.jpg" /> <!-- Preview Panel --> Preview Drag points to adjust <img id="ccpg-preview-img" src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600" alt="Preview image" /> Generated CSS <textarea id="ccpg-output" readonly="readonly">clip-path: inset(10% 10% 10% 10% round 10%);</textarea> <button id="ccpg-copy-btn"> Copy CSS </button>