Box Shadow Generator

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

You might also like

CSS Gradient Generator

CSS Grid Generator

Box Shadow Generator