<style> /* CSS Filter Generator - High Specificity Styles */<br /> .cssfg-wrapper.cssfg-wrapper.cssfg-wrapper {<br /> --cssfg-primary: #4150F6;<br /> --cssfg-primary-light: #6B77F8;<br /> --cssfg-primary-dark: #2D3AD4;<br /> --cssfg-bg: #FFFFFF;<br /> --cssfg-surface: #F8F9FC;<br /> --cssfg-border: #E2E6EF;<br /> --cssfg-text: #1A1D2D;<br /> --cssfg-text-secondary: #5A6178;<br /> --cssfg-code-bg: #1E2235;<br /> --cssfg-success: #10B981;<br /> --cssfg-radius: 12px;<br /> --cssfg-shadow: 0 4px 24px rgba(65, 80, 246, 0.08);<br /> --cssfg-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);<br /> font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;<br /> box-sizing: border-box !important;<br /> max-width: 1280px !important;<br /> margin: 0 auto !important;<br /> padding: 20px !important;<br /> background: var(--cssfg-bg) !important;<br /> color: var(--cssfg-text) !important;<br /> line-height: 1.5 !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper.cssfg-wrapper *,<br /> .cssfg-wrapper.cssfg-wrapper.cssfg-wrapper *::before,<br /> .cssfg-wrapper.cssfg-wrapper.cssfg-wrapper *::after {<br /> box-sizing: border-box !important;<br /> margin: 0 !important;<br /> padding: 0 !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-header {<br /> display: flex !important;<br /> align-items: center !important;<br /> justify-content: space-between !important;<br /> margin-bottom: 20px !important;<br /> flex-wrap: wrap !important;<br /> gap: 12px !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-title {<br /> font-size: 24px !important;<br /> font-weight: 700 !important;<br /> color: var(--cssfg-text) !important;<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-title-icon {<br /> width: 32px !important;<br /> height: 32px !important;<br /> background: linear-gradient(135deg, var(--cssfg-primary), var(--cssfg-primary-light)) !important;<br /> -webkit-border-radius: 8px !important;<br /> -moz-border-radius: 8px !important;<br /> border-radius: 8px !important;<br /> display: flex !important;<br /> align-items: center !important;<br /> justify-content: center !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-title-icon svg {<br /> width: 18px !important;<br /> height: 18px !important;<br /> color: white !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-main {<br /> display: grid !important;<br /> grid-template-columns: 340px 1fr !important;<br /> gap: 20px !important;<br /> margin-bottom: 20px !important;<br /> }<br /> @media (max-width: 900px) {<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-main {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-panel {<br /> background: var(--cssfg-surface) !important;<br /> -webkit-border-radius: var(--cssfg-radius) !important;<br /> -moz-border-radius: var(--cssfg-radius) !important;<br /> border-radius: var(--cssfg-radius) !important;<br /> border: 1px solid var(--cssfg-border) !important;<br /> overflow: hidden !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-panel-header {<br /> display: flex !important;<br /> align-items: center !important;<br /> justify-content: space-between !important;<br /> padding: 14px 18px !important;<br /> background: var(--cssfg-bg) !important;<br /> border-bottom: 1px solid var(--cssfg-border) !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-panel-title {<br /> font-size: 14px !important;<br /> font-weight: 600 !important;<br /> color: var(--cssfg-text) !important;<br /> text-transform: uppercase !important;<br /> letter-spacing: 0.5px !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-btn {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> justify-content: center !important;<br /> gap: 6px !important;<br /> padding: 8px 16px !important;<br /> font-size: 13px !important;<br /> font-weight: 600 !important;<br /> -webkit-border-radius: 8px !important;<br /> -moz-border-radius: 8px !important;<br /> border-radius: 8px !important;<br /> border: none !important;<br /> cursor: pointer !important;<br /> transition: var(--cssfg-transition) !important;<br /> font-family: inherit !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-btn-primary {<br /> background: linear-gradient(135deg, var(--cssfg-primary), var(--cssfg-primary-light)) !important;<br /> color: white !important;<br /> box-shadow: 0 2px 8px rgba(65, 80, 246, 0.3) !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-btn-primary:hover {<br /> transform: translateY(-1px) !important;<br /> box-shadow: 0 4px 12px rgba(65, 80, 246, 0.4) !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-btn-secondary {<br /> background: var(--cssfg-bg) !important;<br /> color: var(--cssfg-text-secondary) !important;<br /> border: 1px solid var(--cssfg-border) !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-btn-secondary:hover {<br /> background: var(--cssfg-surface) !important;<br /> color: var(--cssfg-text) !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-controls {<br /> padding: 16px 18px !important;<br /> max-height: 380px !important;<br /> overflow-y: auto !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-controls::-webkit-scrollbar {<br /> width: 6px !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-controls::-webkit-scrollbar-track {<br /> background: transparent !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-controls::-webkit-scrollbar-thumb {<br /> background: var(--cssfg-border) !important;<br /> -webkit-border-radius: 3px !important;<br /> -moz-border-radius: 3px !important;<br /> border-radius: 3px !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-control {<br /> margin-bottom: 18px !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-control:last-child {<br /> margin-bottom: 0 !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-control-header {<br /> display: flex !important;<br /> align-items: center !important;<br /> justify-content: space-between !important;<br /> margin-bottom: 8px !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-control-label {<br /> font-size: 13px !important;<br /> font-weight: 500 !important;<br /> color: var(--cssfg-text) !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-control-value {<br /> font-size: 12px !important;<br /> font-weight: 600 !important;<br /> color: var(--cssfg-primary) !important;<br /> background: rgba(65, 80, 246, 0.1) !important;<br /> padding: 2px 8px !important;<br /> -webkit-border-radius: 4px !important;<br /> -moz-border-radius: 4px !important;<br /> border-radius: 4px !important;<br /> min-width: 50px !important;<br /> text-align: center !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-slider-container {<br /> position: relative !important;<br /> height: 6px !important;<br /> background: var(--cssfg-border) !important;<br /> -webkit-border-radius: 3px !important;<br /> -moz-border-radius: 3px !important;<br /> border-radius: 3px !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-slider-fill {<br /> position: absolute !important;<br /> left: 0 !important;<br /> top: 0 !important;<br /> height: 100% !important;<br /> background: linear-gradient(90deg, var(--cssfg-primary), var(--cssfg-primary-light)) !important;<br /> -webkit-border-radius: 3px !important;<br /> -moz-border-radius: 3px !important;<br /> border-radius: 3px !important;<br /> pointer-events: none !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-slider {<br /> -webkit-appearance: none !important;<br /> -moz-appearance: none !important;<br /> appearance: none !important;<br /> width: 100% !important;<br /> height: 6px !important;<br /> background: transparent !important;<br /> cursor: pointer !important;<br /> position: absolute !important;<br /> top: 0 !important;<br /> left: 0 !important;<br /> margin: 0 !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-slider::-webkit-slider-thumb {<br /> -webkit-appearance: none !important;<br /> appearance: none !important;<br /> width: 18px !important;<br /> height: 18px !important;<br /> background: white !important;<br /> border: 3px solid var(--cssfg-primary) !important;<br /> -webkit-border-radius: 50% !important;<br /> border-radius: 50% !important;<br /> cursor: pointer !important;<br /> box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;<br /> transition: var(--cssfg-transition) !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-slider::-webkit-slider-thumb:hover {<br /> transform: scale(1.1) !important;<br /> box-shadow: 0 4px 12px rgba(65, 80, 246, 0.3) !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-slider::-moz-range-thumb {<br /> width: 18px !important;<br /> height: 18px !important;<br /> background: white !important;<br /> border: 3px solid var(--cssfg-primary) !important;<br /> -moz-border-radius: 50% !important;<br /> border-radius: 50% !important;<br /> cursor: pointer !important;<br /> box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-preview-content {<br /> padding: 20px !important;<br /> display: flex !important;<br /> align-items: center !important;<br /> justify-content: center !important;<br /> min-height: 300px !important;<br /> background: linear-gradient(135deg, #f0f0f5 0%, #e8e8f0 100%) !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-preview-image {<br /> max-width: 100% !important;<br /> max-height: 340px !important;<br /> -webkit-border-radius: 8px !important;<br /> -moz-border-radius: 8px !important;<br /> border-radius: 8px !important;<br /> box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;<br /> transition: filter 0.15s ease !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-code-panel {<br /> background: var(--cssfg-code-bg) !important;<br /> -webkit-border-radius: var(--cssfg-radius) !important;<br /> -moz-border-radius: var(--cssfg-radius) !important;<br /> border-radius: var(--cssfg-radius) !important;<br /> overflow: hidden !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-code-header {<br /> display: flex !important;<br /> align-items: center !important;<br /> justify-content: space-between !important;<br /> padding: 12px 18px !important;<br /> background: rgba(255, 255, 255, 0.05) !important;<br /> border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-code-label {<br /> font-size: 12px !important;<br /> font-weight: 600 !important;<br /> color: rgba(255, 255, 255, 0.7) !important;<br /> text-transform: uppercase !important;<br /> letter-spacing: 1px !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-btn-copy {<br /> background: var(--cssfg-primary) !important;<br /> color: white !important;<br /> padding: 6px 14px !important;<br /> font-size: 12px !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-btn-copy:hover {<br /> background: var(--cssfg-primary-light) !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-btn-copy.cssfg-copied {<br /> background: var(--cssfg-success) !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-code-content {<br /> padding: 16px 18px !important;<br /> font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace !important;<br /> font-size: 13px !important;<br /> line-height: 1.6 !important;<br /> color: #E2E8F0 !important;<br /> overflow-x: auto !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-code-content pre {<br /> margin: 0 !important;<br /> white-space: pre-wrap !important;<br /> word-break: break-word !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-code-selector {<br /> color: #7DD3FC !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-code-property {<br /> color: #C4B5FD !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-code-value {<br /> color: #FCD34D !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-upload-area {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-upload-btn {<br /> position: relative !important;<br /> overflow: hidden !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-upload-input {<br /> position: absolute !important;<br /> top: 0 !important;<br /> left: 0 !important;<br /> width: 100% !important;<br /> height: 100% !important;<br /> opacity: 0 !important;<br /> cursor: pointer !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-upload-hint {<br /> font-size: 11px !important;<br /> color: var(--cssfg-text-secondary) !important;<br /> }<br /> /* Mobile Responsive */<br /> @media (max-width: 600px) {<br /> .cssfg-wrapper.cssfg-wrapper.cssfg-wrapper {<br /> padding: 12px !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-title {<br /> font-size: 18px !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-controls {<br /> max-height: none !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-preview-content {<br /> min-height: 200px !important;<br /> padding: 16px !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-preview-image {<br /> max-height: 200px !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-header {<br /> flex-direction: column !important;<br /> align-items: flex-start !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-upload-area {<br /> flex-direction: column !important;<br /> align-items: flex-start !important;<br /> width: 100% !important;<br /> }<br /> .cssfg-wrapper.cssfg-wrapper .cssfg-upload-btn {<br /> width: 100% !important;<br /> }<br /> }<br /> pre#cssfg-code-output {<br /> background: transparent;<br /> border: none;<br /> }<br /> </style> CSS Filter Generator Upload Image <input id="cssfg-image-upload" accept="image/*" type="file" /> or use default preview Filter Properties <button id="cssfg-reset"></button> Reset Live Preview <img id="cssfg-preview-image" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=600&q=80" alt="Preview" /> Generated CSS <button id="cssfg-copy"></button> Copy <pre id="cssfg-code-output"></pre>
