CSS Box Shadow Generator

CSS Box Shadow Generator

Adjust offset, blur, spread, color, opacity and inset to generate a CSS box-shadow. Preview the shadow and corner radius before copying the declarations.

Shadow settings

Shadow preview

CSS generation and preview run in your browser without sending the settings to a conversion server. Results are not automatically saved to a file or account.

Comments & questions

CSS Box Shadow Generator

Build a shadow for a card or button by adjusting numeric values and color. The preview responds immediately to offset, blur, spread and opacity changes. Press Run to create one box-shadow layer and a matching border-radius declaration.

Key features

  • Switch between an outer shadow and an inset shadow
  • Set offsets from -100 to 100px, blur from 0 to 100px and spread from -50 to 50px
  • Choose a six-digit HEX color and opacity from 0 to 100%
  • Preview corner radius together with the actual CSS shadow

How to use

  1. Enter horizontal and vertical offsets, blur and spread.
  2. Choose a color, opacity and outer or inset direction.
  3. Check the preview, press Run and copy the generated CSS.

Use cases

  • Create a soft outer shadow for a card grid
  • Compare inset effects for inputs or pressed buttons
  • Turn visual shadow choices into reusable CSS declarations

Frequently asked questions

What is the difference between blur and spread?

Blur softens the edge of a shadow. Spread expands or contracts its shape before blur is applied; a negative spread pulls the shadow inward.

Can I generate multiple shadow layers?

This tool generates one layer at a time. To combine several layers, join separately generated box-shadow values with commas in your stylesheet.

Why might it look different on my site?

Background color, element size and surrounding space affect the appearance. This preview uses a white sample on a light checkerboard. Also check the CSS on your final page.

How are numeric values handled?

Decimals are accepted within the range shown for each field and rounded to two decimal places. Empty values and values outside the allowed range show an error.

Privacy

CSS generation and preview run in your browser without sending the settings to a conversion server. Results are not automatically saved to a file or account.

References

Related Tools

CSS Gradient GeneratorColor Code ConverterCSS MinifierWasm Module InspectorHreflang Matrix CheckerAST Query PlaygroundContainer Build GraphDependency Graph ExplorerSemver Range LabCron Schedule AuditorPatch Review WorkbenchSource Map ExplorerLocalization Catalog AuditorStructured Data ReviewerHTTP Archive AnalyzerWebhook Signature LabProtobuf Schema WorkbenchGraphQL Schema LabAvro Schema EvolutionLocal SQL WorkbenchSchema Form BuilderMesh Repair WorkbenchPipe Network LabRobot Arm Kinematics LabThermal Network LabBeam Response LabGear Train DesignerTolerance Stackup LabSensor Calibration FitPCB Stackup PlannerDigital Filter DesignerNetwork Reachability MapSun Shadow MapGPS Error SimulatorDigital Logic SimulatorAnalog Circuit LabMechanism Linkage LabAnalysis Mesh GeneratorOpenAPI Contract InspectorDatabase Migration PlannerDimensional Equation CheckerTruss Force LabBoolean Minimization LabControl Response LabQueueing Simulation LabGeofence Event SimulatorCoordinate Reference LabSurvey Traverse LabRaster Classification LabChoropleth Design LabMap Print ComposerRaster Reprojection LabElevation Contour MakerTerrain Viewshed LabWatershed DelineatorMap Tile PackagerText File Encoding WorkbenchFilesystem Portability AuditorSBOM License ExplorerFile Signature Auditornpm Lockfile Conflict ResolverSource Secret AuditorOffline Web Package BuilderCertificate Chain InspectorTorrent Metainfo InspectorChunked File PackagerEncrypted File VaultDuplicate File FinderArchive WorkbenchDesign Token ManagerSpacing Token DesignerResponsive Type SystemPackaging Dieline DesignerSVG Icon Sprite PackerFlex Layout PlaygroundCSS Grid PlaygroundRegex Equivalence LabMarkdown Repository AuditorLog Template MinerResponsive Layout AuditorEmail Template PreviewInternal Link GraphState Machine TesterPetri Net SimulatorGit History VisualizerCurl Request WorkbenchBinary Protocol DesignerHex File EditorBinary Patch WorkbenchFile Signature WorkbenchAPI Mock SandboxSchema Column MapperEvent Log SessionizerER Diagram DesignerTime Series Gap AuditorStratified Data SplitterData Lineage DesignerDecision Tree LabData Anonymization WorkbenchData Expectation RunnerJSON Schema ValidatorBasket Pattern AnalyzerRobots Policy TesterSEO HTML AuditorAccessibility Structure AuditorSyndication Feed WorkbenchIndexNow Payload BuilderCrawl Log AnalyzerCSP Policy WorkbenchSearch Performance AnalyzerCSV Formula Risk AuditorCORS Response SimulatorCache Header LabCookie Policy InspectorWeb Vitals Trace LabSitemap Health AuditorBatch File RenamerFile Manifest VerifierFolder Space MapFolder Difference ReviewerRoute Order OptimizerGeoJSON Map EditorPolygon Overlay LabCartographic Label PlacerSpatial Table JoinGeoJSON Topology AuditorGPX Track AnalyzerTrack Privacy RedactorCSV Table JoinCSV Pivot WorkbenchScientific Data ProfilerTabular Cleaning WorkbenchRecord ReconciliationData Dictionary BuilderCanonical Graph AuditorRedirect Plan TesterHTTP response and ping reference testBrowser and System InformationJSON ↔ YAML ConverterXML ↔ JSON ConverterHTML FormatterJavaScript MinifierMock Data Generator.gitignore GeneratorLicense GeneratorUser-Agent ParserPassword Strength CheckerCode to ImageXML FormatterHTTP Status Code LookupMIME Type LookupJS & SQL String EscapeIndent ConverterNumber Base ConverterUnicode Escape ConverterUnicode InspectorJSON Structure DiffMarkdown Table GeneratorBase64 EncoderJSON FormatterURL EncoderSQL FormatterCron Expression GeneratorRegex TesterUUID GeneratorHash GeneratorTimestamp ConverterJWT DecoderHTML Entity ConverterMarkdown PreviewMeta Tag GeneratorJSON ↔ CSVCase ConverterImage to Base64
Explore all Dev Tools tools →Image/Media →Text/Convert →Life/Fun →