--- title: "Shadow atom | GoodBarber's Design System" description: "This property is used to manage the shadow of components.\r\n\r\nAll GoodBarber components manage it in order to keep consistency. We have **global shadow management** in the backoffice.\r\n\r\nIt has **8 types** of preset levels, but it's also possible to c" canonical_url: "https://www.goodbarber.com/uxdesign/atom-shadow/" lang: nl --- # Shadow atom | GoodBarber's Design System [Design System](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://nl.goodbarber.com/uxdesign/](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://nl.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) # Shadow atom Atomic Components The shadow atom is used to apply internal or external shadows to components like thumbnails, buttons, text fields, and many more. Eight preset levels are proposed. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/atom_shadow.4ea7eb5068bc.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/atom_shadow.4ea7eb5068bc.mp4) ## Introduction All GoodBarber components manage it in order to keep consistency. We have **global shadow management** in the backoffice. It has **8 types** of preset levels, but it's also possible to customize this offset. A shadow can be internal or external. The shadow doesn’t have any impact on the component it’s applied on. The layout, the size or the margins of this component doesn’t change if you change the shadow level. ![Shadow levels](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Shadow.52371aedf511.gif) *Shadow levels* ### JSON Here’s the JSON format of this object : ``` {  "enabled": BOOL // Default value 0,  "position": { "internal", "external" }, // Default external  "color": COLOR,  "type": { "level1", "level2", "level3", "level4", "custom"},  "offset": { x: FLOAT, y: FLOAT } // Used only on custom type,  "blur": FLOAT // Used only on custom type,  "opacity": {0 -> 1} // Used only on custom type, } ``` ### Documentation #### Shadow levels values These parameters are valid for all devices: | | **DROP SHADOW** | | | | **Level 1** | | **Level 2** | | **Level 3** | | **Level 4** | | | --- | --------------- | --- | --- | --- | ----------- | --- | ----------- | --- | ----------- | --- | ----------- | --- | | | **Offset Y** | | ▸ | | 1 px | | 3 px | | 6 px | | 20 px | | | | **Blur** | | ▸ | | 3 px | | 6 px | | 12 px | | 40 px | | | | | | | | | | | | | | | | ![Drop shadow levels](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Shadow-Drop.45c83b295dae.png) *Drop shadow levels* | | **INNER SHADOW** | | | | **Level -1** | | **Level -2** | | **Level -3** | | **Level -4** | | | --- | ---------------- | --- | --- | --- | ------------ | --- | ------------ | --- | ------------ | --- | ------------ | --- | | | **Offset Y** | | ▸ | | 1 px | | 3 px | | 6 px | | 20 px | | | | **Blur** | | ▸ | | 3 px | | 6 px | | 12 px | | 40 px | | | | | | | | | | | | | | | | ![Inner shadow levels](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Shadow-Inner.b8219a112e6f.png) *Inner shadow levels* #### Shadow management Not all components can receive Atom Shadow, or only in a restricted way. These parameters are detailed in the sections specific to each component. Indeed: - **Some components cannot receive the Atom Shadow** *In the example below, we do not apply the Atom Shadow to the text or the outline of the button* | | | | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | | ![Good practice](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Shadow-Do.1e5f85358ace.png) | ![Bad practice](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Shadow-Dont.6f0a877ae29c.png) | - **Some components can only receive certain levels of shadow** *The floating menu and the alert message below should come to the fore, so they will receive high shadow levels (here Level 3 and 4)* ![Shade level according to the component](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Shadow-Levels.03dda202a2fb.png) *Shade level according to the component* - **Some components can receive different Levels from the Atom Shadow depending on their state** *Below is the behavior of a Textfield changing from Inactive to Active state* ![Text field state](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Atoms-Shadow-TextField.198cdb4d0bb9.gif) *Text field state* ### Example [Atoms-Shadow-Video](https://player.vimeo.com/video/764851220?h=309b266b2b&badge=0&autopause=0&autoplay=1&loop=1&player_id=0&app_id=58479)