<header> <h1>Box Shadow Generator</h1> A box shadow CSS generator that helps you quickly generate box-shadow CSS declarations for your website. It comes with many options and it demonstrates instantly. If you want to have cool fonts, please also try our font keyboard to help easily </header><style> /* Reset & Base */<br /> .bsg-wrapper * {<br /> margin: 0 ;<br /> padding: 0 ;<br /> box-sizing: border-box ;<br /> line-height: 1.5 ;<br /> }<br /> .bsg-wrapper {<br /> font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;<br /> width: 100% ;<br /> max-width: 1280px ;<br /> height: 550px ;<br /> background: #ffffff ;<br /> border-radius: 16px ;<br /> box-shadow: 0 4px 24px rgba(65, 80, 246, 0.08) ;<br /> display: grid ;<br /> grid-template-columns: 280px 1fr 260px ;<br /> overflow: hidden ;<br /> border: 1px solid #e8eaef ;<br /> }<br /> /* Left Panel - Shadow Controls */<br /> .bsg-panel-left {<br /> background: #fafbfc ;<br /> border-right: 1px solid #e8eaef ;<br /> padding: 20px ;<br /> overflow-y: auto ;<br /> display: flex ;<br /> flex-direction: column ;<br /> gap: 16px ;<br /> }<br /> .bsg-panel-header {<br /> display: flex ;<br /> align-items: center ;<br /> justify-content: space-between ;<br /> margin-bottom: 8px ;<br /> }<br /> .bsg-panel-title {<br /> font-size: 15px ;<br /> font-weight: 600 ;<br /> color: #1a1d26 ;<br /> }<br /> .bsg-btn-primary {<br /> background: #4150F6 ;<br /> color: white ;<br /> border: none ;<br /> padding: 8px 14px ;<br /> border-radius: 8px ;<br /> font-size: 13px ;<br /> font-weight: 500 ;<br /> cursor: pointer ;<br /> transition: all 0.2s ease ;<br /> display: flex ;<br /> align-items: center ;<br /> gap: 6px ;<br /> }<br /> .bsg-btn-primary:hover {<br /> background: #3340d4 ;<br /> transform: translateY(-1px) ;<br /> }<br /> .bsg-btn-primary svg {<br /> width: 14px ;<br /> height: 14px ;<br /> }<br /> .bsg-shadows-list {<br /> display: flex ;<br /> flex-direction: column ;<br /> gap: 12px ;<br /> flex: 1 ;<br /> overflow-y: auto ;<br /> }<br /> .bsg-shadow-item {<br /> background: white ;<br /> border: 1px solid #e8eaef ;<br /> border-radius: 12px ;<br /> overflow: scroll ;<br /> transition: border-color 0.2s ;<br /> }<br /> .bsg-shadow-item.bsg-active {<br /> border-color: #4150F6 ;<br /> }<br /> .bsg-shadow-header {<br /> display: flex ;<br /> align-items: center ;<br /> justify-content: space-between ;<br /> padding: 12px 14px ;<br /> background: #f8f9fb ;<br /> cursor: pointer ;<br /> user-select: none ;<br /> }<br /> .bsg-shadow-header:hover {<br /> background: #f0f2f5 ;<br /> }<br /> .bsg-shadow-name {<br /> font-size: 13px ;<br /> font-weight: 600 ;<br /> color: #1a1d26 ;<br /> display: flex ;<br /> align-items: center ;<br /> gap: 8px ;<br /> }<br /> .bsg-shadow-toggle {<br /> width: 16px ;<br /> height: 16px ;<br /> border-radius: 4px ;<br /> border: 2px solid #4150F6 ;<br /> background: #4150F6 ;<br /> cursor: pointer ;<br /> display: flex ;<br /> align-items: center ;<br /> justify-content: center ;<br /> }<br /> .bsg-shadow-toggle.bsg-inactive {<br /> background: white ;<br /> }<br /> .bsg-shadow-toggle svg {<br /> width: 10px ;<br /> height: 10px ;<br /> color: white ;<br /> }<br /> .bsg-chevron {<br /> width: 16px ;<br /> height: 16px ;<br /> color: #8b92a5 ;<br /> transition: transform 0.2s ;<br /> }<br /> .bsg-shadow-item.bsg-expanded .bsg-chevron {<br /> transform: rotate(180deg) ;<br /> }<br /> .bsg-shadow-content {<br /> padding: 14px ;<br /> display: none ;<br /> }<br /> .bsg-shadow-item.bsg-expanded .bsg-shadow-content {<br /> display: block ;<br /> }<br /> .bsg-shadow-actions {<br /> display: flex ;<br /> gap: 8px ;<br /> margin-bottom: 14px ;<br /> }<br /> .bsg-checkbox-label {<br /> display: flex ;<br /> align-items: center ;<br /> gap: 6px ;<br /> font-size: 12px ;<br /> color: #5a6170 ;<br /> cursor: pointer ;<br /> }<br /> .bsg-checkbox {<br /> width: 16px ;<br /> height: 16px ;<br /> border-radius: 4px ;<br /> border: 2px solid #d1d5e0 ;<br /> cursor: pointer ;<br /> accent-color: #4150F6 ;<br /> }<br /> .bsg-btn-remove {<br /> background: #fee2e2 ;<br /> color: #dc2626 ;<br /> border: none ;<br /> padding: 6px 12px ;<br /> border-radius: 6px ;<br /> font-size: 12px ;<br /> font-weight: 500 ;<br /> cursor: pointer ;<br /> margin-left: auto ;<br /> transition: all 0.2s ;<br /> }<br /> .bsg-btn-remove:hover {<br /> background: #fecaca ;<br /> }<br /> .bsg-control-group {<br /> margin-bottom: 14px ;<br /> }<br /> .bsg-control-header {<br /> display: flex ;<br /> align-items: center ;<br /> justify-content: space-between ;<br /> margin-bottom: 8px ;<br /> }<br /> .bsg-control-label {<br /> font-size: 12px ;<br /> font-weight: 500 ;<br /> color: #5a6170 ;<br /> }<br /> .bsg-value-input {<br /> display: flex ;<br /> align-items: center ;<br /> gap: 4px ;<br /> }<br /> .bsg-input-number {<br /> width: 50px!important;<br /> padding: 4px 6px!important;<br /> border: 1px solid #e8eaef!important;<br /> border-radius: 6px!important;<br /> font-size: 12px!important;<br /> text-align: center!important;<br /> color: #1a1d26!important;<br /> }<br /> .bsg-input-number:focus {<br /> outline: none ;<br /> border-color: #4150F6 ;<br /> }<br /> .bsg-unit {<br /> font-size: 11px ;<br /> color: #8b92a5 ;<br /> }<br /> .bsg-slider {<br /> width: 100%!important;<br /> height: 4px!important;<br /> border-radius: 2px!important;<br /> background: #e8eaef!important;<br /> -webkit-appearance: none!important;<br /> appearance: none!important;<br /> cursor: pointer!important;<br /> padding: 0 !important;<br /> }<br /> .bsg-slider::-webkit-slider-thumb {<br /> -webkit-appearance: none!important;<br /> width: 16px!important;<br /> height: 16px!important;<br /> border-radius: 50%!important;<br /> background: #4150F6!important;<br /> cursor: pointer!important;<br /> box-shadow: 0 2px 6px rgba(65, 80, 246, 0.3)!important ;<br /> transition: transform 0.15s!important ;<br /> }<br /> .bsg-slider::-webkit-slider-thumb:hover {<br /> transform: scale(1.15)!important ;<br /> }<br /> .bsg-color-input-wrap {<br /> display: flex !important;<br /> gap: 8px !important;<br /> align-items: center !important;<br /> }<br /> .bsg-color-picker {<br /> width: 32px!important;<br /> height: 32px!important;<br /> border: 2px solid #e8eaef!important;<br /> border-radius: 8px!important;<br /> cursor: pointer!important;<br /> padding: 0!important;<br /> overflow: hidden!important;<br /> }<br /> .bsg-color-picker::-webkit-color-swatch-wrapper {<br /> padding: 0 ;<br /> }<br /> .bsg-color-picker::-webkit-color-swatch {<br /> border: none ;<br /> border-radius: 6px ;<br /> }<br /> .bsg-input-text {<br /> flex: 1 !important;<br /> padding: 8px 10px!important ;<br /> border: 1px solid #e8eaef;<br /> border-radius: 8px !important;<br /> font-size: 12px !important;<br /> color: #1a1d26 !important;<br /> font-family: 'SF Mono', 'Consolas', monospace ;<br /> }<br /> .bsg-input-text:focus {<br /> outline: none !important;<br /> border-color: #4150F6 !important;<br /> }<br /> .bsg-opacity-control {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 8px !important;<br /> margin-top: 8px !important;<br /> }<br /> .bsg-opacity-control .bsg-slider {<br /> flex: 1!important;<br /> }<br /> /* Center - Preview Area */<br /> .bsg-preview-area {<br /> background: #f3f4f6;<br /> display: flex !important;<br /> flex-direction: column !important;<br /> position: relative !important;<br /> }<br /> .bsg-preview-container {<br /> flex: 1 !important;<br /> display: flex !important;<br /> align-items: center !important;<br /> justify-content: center !important;<br /> padding: 30px !important;<br /> }<br /> .bsg-preview-box {<br /> width: 180px ;<br /> height: 140px ;<br /> background: #ffffff ;<br /> border-radius: 16px ;<br /> transition: all 0.3s ease ;<br /> }<br /> /* Code Section */<br /> .bsg-code-section {<br /> background: #1a1d26 ;<br /> padding: 14px 20px ;<br /> border-top: 1px solid #2d3142 ;<br /> }<br /> .bsg-code-header {<br /> display: flex ;<br /> align-items: center ;<br /> justify-content: space-between ;<br /> margin-bottom: 10px ;<br /> }<br /> .bsg-code-title {<br /> font-size: 12px ;<br /> font-weight: 600 ;<br /> color: #8b92a5 ;<br /> text-transform: uppercase ;<br /> letter-spacing: 0.5px ;<br /> }<br /> .bsg-btn-copy {<br /> background: #4150F6 ;<br /> color: white ;<br /> border: none ;<br /> padding: 6px 12px ;<br /> border-radius: 6px ;<br /> font-size: 12px ;<br /> font-weight: 500 ;<br /> cursor: pointer ;<br /> display: flex ;<br /> align-items: center ;<br /> gap: 6px ;<br /> transition: all 0.2s ;<br /> }<br /> .bsg-btn-copy:hover {<br /> background: #3340d4 ;<br /> }<br /> .bsg-btn-copy.bsg-copied {<br /> background: #10b981 ;<br /> }<br /> .bsg-btn-copy svg {<br /> width: 14px ;<br /> height: 14px ;<br /> }<br /> .bsg-code-display {<br /> font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;<br /> font-size: 13px ;<br /> color: #e8eaef ;<br /> background: #252836 ;<br /> padding: 12px 14px ;<br /> border-radius: 8px ;<br /> overflow-x: auto ;<br /> }<br /> .bsg-code-display .bsg-property {<br /> color: #7dd3fc ;<br /> }<br /> .bsg-code-display .bsg-value {<br /> color: #fbbf24 ;<br /> }<br /> /* Right Panel - Box Properties */<br /> .bsg-panel-right {<br /> background: #fafbfc ;<br /> border-left: 1px solid #e8eaef ;<br /> padding: 20px ;<br /> overflow-y: auto ;<br /> }<br /> .bsg-section {<br /> margin-bottom: 20px ;<br /> }<br /> .bsg-section-title {<br /> font-size: 11px ;<br /> font-weight: 600 ;<br /> color: #8b92a5 ;<br /> text-transform: uppercase ;<br /> letter-spacing: 0.5px ;<br /> margin-bottom: 14px ;<br /> }<br /> .bsg-property-row {<br /> margin-bottom: 14px ;<br /> }<br /> .bsg-property-label {<br /> font-size: 12px ;<br /> font-weight: 500 ;<br /> color: #5a6170 ;<br /> margin-bottom: 6px ;<br /> display: block ;<br /> }<br /> .bsg-full-input {<br /> width: 100% ;<br /> padding: 10px 12px ;<br /> border: 1px solid #e8eaef ;<br /> border-radius: 8px ;<br /> font-size: 13px ;<br /> color: #1a1d26 ;<br /> font-family: 'SF Mono', 'Consolas', monospace;<br /> transition: border-color 0.2s ;<br /> }<br /> .bsg-full-input:focus {<br /> outline: none ;<br /> border-color: #4150F6 ;<br /> }<br /> .bsg-slider-row {<br /> display: flex!important;<br /> align-items: center!important;<br /> gap: 10px!important;<br /> }<br /> .bsg-slider-row .bsg-slider {<br /> flex: 1!important;<br /> }<br /> .bsg-slider-value {<br /> min-width: 55px!important;<br /> display: flex!important;<br /> align-items: center!important;<br /> gap: 2px!important;<br /> }<br /> .bsg-slider-value input {<br /> width: 40px!important;<br /> padding: 4px 6px!important;<br /> border: 1px solid #e8eaef!important;<br /> border-radius: 6px!important;<br /> font-size: 12px!important;<br /> text-align: center!important;<br /> color: #1a1d26!important;<br /> }<br /> .bsg-slider-value input:focus {<br /> outline: none!important;<br /> border-color: #4150F6!important;<br /> }<br /> .bsg-slider-value span {<br /> font-size: 11px!important;<br /> color: #8b92a5!important;<br /> }<br /> /* Scrollbar */<br /> .bsg-panel-left::-webkit-scrollbar,<br /> .bsg-panel-right::-webkit-scrollbar,<br /> .bsg-shadows-list::-webkit-scrollbar {<br /> width: 6px ;<br /> }<br /> .bsg-panel-left::-webkit-scrollbar-track,<br /> .bsg-panel-right::-webkit-scrollbar-track,<br /> .bsg-shadows-list::-webkit-scrollbar-track {<br /> background: transparent ;<br /> }<br /> .bsg-panel-left::-webkit-scrollbar-thumb,<br /> .bsg-panel-right::-webkit-scrollbar-thumb,<br /> .bsg-shadows-list::-webkit-scrollbar-thumb {<br /> background: #d1d5e0 ;<br /> border-radius: 3px ;<br /> }<br /> /* Responsive - Laptop/Small Desktop */<br /> @media (max-width: 1024px) {<br /> .bsg-wrapper {<br /> grid-template-columns: 240px 1fr 200px ;<br /> height: auto ;<br /> min-height: 550px ;<br /> }<br /> .bsg-panel-left,<br /> .bsg-panel-right {<br /> padding: 16px ;<br /> }<br /> }<br /> /* Responsive - Tablet */<br /> @media (max-width: 900px) {<br /> .bsg-wrapper {<br /> grid-template-columns: 1fr 1fr ;<br /> grid-template-rows: auto 1fr ;<br /> height: auto ;<br /> min-height: auto ;<br /> }<br /> .bsg-preview-area {<br /> grid-column: 1 / -1 ;<br /> grid-row: 1 ;<br /> min-height: 280px ;<br /> }<br /> .bsg-panel-left {<br /> border-right: 1px solid #e8eaef ;<br /> border-top: 1px solid #e8eaef ;<br /> max-height: 400px ;<br /> }<br /> .bsg-panel-right {<br /> border-left: 1px solid #e8eaef ;<br /> border-top: 1px solid #e8eaef ;<br /> max-height: 400px ;<br /> }<br /> .bsg-preview-container {<br /> padding: 20px ;<br /> }<br /> .bsg-code-section {<br /> padding: 12px 16px ;<br /> }<br /> }<br /> /* Responsive - Mobile */<br /> @media (max-width: 600px) {<br /> .bsg-wrapper {<br /> grid-template-columns: 1fr ;<br /> grid-template-rows: auto auto auto ;<br /> border-radius: 12px ;<br /> }<br /> .bsg-preview-area {<br /> grid-column: 1 ;<br /> grid-row: 1 ;<br /> min-height: 240px ;<br /> }<br /> .bsg-panel-left {<br /> grid-row: 2 ;<br /> border-right: none ;<br /> border-top: 1px solid #e8eaef ;<br /> max-height: 350px ;<br /> }<br /> .bsg-panel-right {<br /> grid-row: 3 ;<br /> border-left: none ;<br /> border-top: 1px solid #e8eaef ;<br /> max-height: none ;<br /> }<br /> .bsg-panel-header {<br /> flex-wrap: wrap ;<br /> gap: 10px ;<br /> }<br /> .bsg-preview-box {<br /> max-width: 150px ;<br /> max-height: 120px ;<br /> }<br /> .bsg-code-display {<br /> font-size: 11px ;<br /> padding: 10px 12px ;<br /> }<br /> .bsg-btn-copy {<br /> padding: 5px 10px ;<br /> font-size: 11px ;<br /> }<br /> .bsg-control-group {<br /> margin-bottom: 12px ;<br /> }<br /> .bsg-shadow-content {<br /> padding: 12px ;<br /> }<br /> .bsg-shadow-header {<br /> padding: 10px 12px ;<br /> }<br /> .bsg-section {<br /> margin-bottom: 16px ;<br /> }<br /> .bsg-property-row {<br /> margin-bottom: 12px ;<br /> }<br /> .bsg-color-input-wrap {<br /> flex-wrap: wrap ;<br /> }<br /> .bsg-input-text {<br /> min-width: 80px ;<br /> }<br /> }<br /> /* Extra small mobile */<br /> @media (max-width: 400px) {<br /> .bsg-panel-left,<br /> .bsg-panel-right {<br /> padding: 12px ;<br /> }<br /> .bsg-panel-title {<br /> font-size: 14px ;<br /> }<br /> .bsg-btn-primary {<br /> padding: 6px 10px ;<br /> font-size: 12px ;<br /> }<br /> .bsg-section-title {<br /> font-size: 10px ;<br /> }<br /> .bsg-property-label,<br /> .bsg-control-label {<br /> font-size: 11px ;<br /> }<br /> }<br /> .bsg-property-row-br, .jnews_inline_related_post{<br /> display: none;<br /> }<br /> </style> <!-- Left Panel - Shadow Controls --> Shadows <button></button> Add <!-- Shadow items will be added here --> <!-- Center - Preview Area --> CSS Code <button id="bsgCopyBtn"></button> Copy box-shadow: none; <!-- Right Panel - Box Properties --> Preview Settings <label>Canvas Color</label> <input id="bsgCanvasColor" type="color" value="#f3f4f6" /> <input id="bsgCanvasColorText" type="text" value="#f3f4f6" /> <label>Box Background</label> <input id="bsgBoxBg" type="color" value="#ffffff" /> <input id="bsgBoxBgText" type="text" value="#ffffff" /> <label>Border Color</label> <input id="bsgBorderColor" type="color" value="#e8eaef" /> <input id="bsgBorderColorText" type="text" value="transparent" /> Box Dimensions <label>Border Radius</label> <input id="bsgBorderRadius" max="100" min="0" type="range" value="16" /> <input id="bsgBorderRadiusVal" max="100" min="0" type="number" value="16" /> px <label>Width</label> <input id="bsgBoxWidth" max="300" min="50" type="range" value="180" /> <input id="bsgBoxWidthVal" max="300" min="50" type="number" value="180" /> px <label>Height</label> <input id="bsgBoxHeight" max="250" min="50" type="range" value="140" /> <input id="bsgBoxHeightVal" max="250" min="50" type="number" value="140" /> px