{"id":21027044,"url":"https://github.com/tom2strobl/smooth-shadow","last_synced_at":"2025-05-15T10:32:08.258Z","repository":{"id":61268225,"uuid":"549901563","full_name":"tom2strobl/smooth-shadow","owner":"tom2strobl","description":"Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation.","archived":false,"fork":false,"pushed_at":"2022-10-12T12:56:19.000Z","size":1872,"stargazers_count":11,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-27T23:03:38.888Z","etag":null,"topics":["box-shadow","css","shadow"],"latest_commit_sha":null,"homepage":"https://tom2strobl.github.io/smooth-shadow/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tom2strobl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-11T23:08:55.000Z","updated_at":"2024-10-25T07:07:46.000Z","dependencies_parsed_at":"2022-10-13T23:45:27.198Z","dependency_job_id":null,"html_url":"https://github.com/tom2strobl/smooth-shadow","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tom2strobl%2Fsmooth-shadow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tom2strobl%2Fsmooth-shadow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tom2strobl%2Fsmooth-shadow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tom2strobl%2Fsmooth-shadow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tom2strobl","download_url":"https://codeload.github.com/tom2strobl/smooth-shadow/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254322979,"owners_count":22051695,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["box-shadow","css","shadow"],"created_at":"2024-11-19T11:47:28.726Z","updated_at":"2025-05-15T10:32:03.242Z","avatar_url":"https://github.com/tom2strobl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# smooth-shadow\n\n\u003e Generate smooth, consistent and always-sexy box-shadows, no matter the size, ideal for design token generation.\n\n![Screenshot of the demo](docs/demo.png)\n\n[Demo](http://tom2strobl.github.io/smooth-shadow)\n\nAs [Tobias](https://tobiasahlin.com/blog/layered-smooth-box-shadows/) already pointed out in 2019, a regular singular CSS `box-shadow` statement is as dull as it gets. Which is fine as long as you use it as a low-level API. And that's what we do by layering multiple box-shadows in a way to make them look a lot more physically realistic. No, the shadows are not *really* raytraced, but we borrow some concepts.\n\nMany great people tackled the issue from Tobias Sahlin, to Philipp Brumm and Josh W Comeau, but none of them offered their solution as OSS-code. The previous attempts at libraries of other folks give you lots of settings like direct alpha, blur and spread settings, but on the flipside that means and you have to find good values for small and large shadows yourself.\n\n`smooth-shadow` is largely opinionated in what makes a great smooth shadow and only offers you relevant options for your usecase:\n\n- Distance (basically the elevation/size of the shadow)\n- Intensity (which should vary depending on environment color)\n- Sharpness (which - although largely opinionated - leaves a little room for the projects style)\n- Color (as real cast shadows pick up the color of reflected light from the surface they are cast on)\n- Light Position (to determine in which direction the shadow should cast)\n\nAnd as always:\n\n- *zero* dependencies\n- *fully typed* in typescript\n- *small* footprint (2.3kb minified)\n- CommonJS bundle, .mjs bundle, .d.ts bundle + type-checking \u0026 Source maps\n\n## Installation\n\n`npm i smooth-shadow` or `yarn add smooth-shadow`\n\n## Usage\n\n```typescript\nimport { getSmoothShadow } from 'smooth-shadow'\n\n// it returns a box-shadow css statement ready to use\nconst boxShadow = getSmoothShadow()\n\n// eg. on a jsx component\n\u003cdiv style={{ boxShadow }} /\u003e\n\n// or eg. in a styled component\nstyled.div`box-shadow: ${boxShadow}`\n\n// or eg. even better in a styled-component (or any other framework) theme\nconst cardShadow = getSmoothShadow({ distance: 100 })\nconst theme = { cardShadow }\n\u003cThemeProvider theme={theme} /\u003e\nstyled.div`box-shadow: ${({ theme }) =\u003e theme.cardShadow};`\n\n// or eg. even better better as a shadow factory\nconst appShadow = (distance: number) =\u003e getSmoothShadow({\n  distance,\n  intensity: 0.2,\n  sharpness: 0.7,\n  color: [69,69,69],\n  lightPosition: [0, -0.5]\n})\nconst cardShadowSmall = appShadow(50)\nconst cardShadowBig = appShadow(200)\nconst theme = { cardShadowSmall, cardShadowBig }\n\u003cThemeProvider theme={theme} /\u003e\nconst SmallCard = styled.div`box-shadow: ${({ theme }) =\u003e theme.cardShadowSmall};`\nconst BigCard = styled.div`box-shadow: ${({ theme }) =\u003e theme.cardShadowBig};`\n```\n\n```typescript\ngetSmoothShadow({\n  // the distance the shadow travels, larger distance = larger shadow\n  distance?: number, // default 100 (between 0 \u0026 1000)\n  // sort of your \"opacity\" parameter if you will\n  intensity?: number, // default 0.5 (between 0 \u0026 1)\n  // low values result in a more mellow shadow, high values in a more crispy experience\n  sharpness?: number, // default 0.5 (between 0 \u0026 1)\n  // on colored backgrounds you should tint your shadows for more sexiness, totally optional though\n  color?: [number, number, number], // default [0, 0, 0] ([0-255, 0-255, 0-255])\n  // position of the lighton x/y axis. 0 is the center, -1 left/top, 1 right/bottom\n  lightPosition?: [number, number] // [-1 - 1, -1 - 1], where 0 is the center\n}) =\u003e string\n```\n\nFor the code example of the screenshot / the [Demo](http://tom2strobl.github.io/smooth-shadow), check out `/docs/index.js`.\n\n## How it works\n\nDepending on `distance` a good amount of layers (more layers means softer result but less performance, so we try to find the best tradeoff) is determined and then through linear interpolation and carefully self-crafted bezier-easing-functions in combination with the `sharpness` and `intensity` arguments realistic looking results are plotted. `color` and `lightPosition` are rather straightforward.\n\n## Performance\n\nWith `179 818 ops/s, ±1.92%` it's considerably fast. That being said I would not suggest you to try animate generated shadow-values directly as there can be up to 24 layers of shadows and animating them directly is costly. Instead animate the opacity of an element that has said shadow. [Read more](https://tobiasahlin.com/blog/how-to-animate-box-shadow/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftom2strobl%2Fsmooth-shadow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftom2strobl%2Fsmooth-shadow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftom2strobl%2Fsmooth-shadow/lists"}