Box shadow inset

Utilities for controlling the box shadow of an element.ExamplesBasic exampleUse utilities like shadow-sm and shadow-lg to apply different sized outer box shadows to an element:shadow-mdshadow-lgshadow-xldiv class="shadow-md ...">div>div class="shadow-lg ...">div>div class="shadow-xl ...">div>Setting the shadow colorUse utilities like shadow-indigo-500 and shadow-cyan-500/50 to change the color of a box shadow:shadow-cyan-500/50shadow-blue-500/50shadow-indigo-500/50button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribebutton>button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribebutton>button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribebutton>By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.Adding an inset shadowUse utilities like inset-shadow-xs and inset-shadow-sm to apply an inset box shadow to an element:inset-shadow-2xsinset-shadow-xsinset-shadow-smdiv class="inset-shadow-2xs ...">div>div class="inset-shadow-xs ...">div>div class="inset-shadow-sm ...">div>These utilities can be useful for things like form controls or wells.Setting the inset shadow colorUse utilities like inset-shadow-indigo-500 and inset-shadow-cyan-500/50 to change the color of an inset box shadow:inset-shadow-indigo-500inset-shadow-indigo-500/50div class="inset-shadow-sm inset-shadow-indigo-500 ...">div>div class="inset-shadow-sm inset-shadow-indigo-500/50 ...">div>By default colored shadows have an opacity of 100% but you can adjust this using the opacity modifier.Adding a ringUse ring or ring- utilities like ring-2 and ring-4 to apply a solid box-shadow to an element:ringring-2ring-4button class="ring ...">Subscribebutton>button class="ring-2 ...">Subscribebutton>button class="ring-4 ...">Subscribebutton>By default rings match the currentColor of the element they are applied to.Setting the ring colorUse utilities like ring-indigo-500 and ring-cyan-500/50 to change the color of a ring:ring-blue-500ring-blue-500/50button class="ring-2 ring-blue-500 ...">Subscribebutton>button class="ring-2 ring-blue-500/50 ...">Subscribebutton>By default rings have an opacity of 100% but you can adjust this using the opacity modifier.Adding an inset ringUse inset-ring or inset-ring- utilities like inset-ring-2 and inset-ring-4 to apply a solid inset box-shadow to an element:inset-ringinset-ring-2inset-ring-4button class="inset-ring ...">Subscribebutton>button class="inset-ring-2 ...">Subscribebutton>button class="inset-ring-4 ...">Subscribebutton>By default inset rings match the currentColor of the element they are applied to.Setting the inset ring colorUse utilities like inset-ring-indigo-500 and inset-ring-cyan-500/50 to change the color of an inset ring:inset-ring-blue-500inset-ring-blue-500/50button class="inset-ring-2 inset-ring-blue-500 ...">Subscribebutton>button class="inset-ring-2 inset-ring-blue-500/50 ...">Subscribebutton>By default inset rings have an opacity of 100% but you can adjust this using the opacity modifier.Removing a box shadowUse the shadow-none, inset-shadow-none,ring-0, and inset-ring-0 utilities to remove an existing box shadow from an element:shadow-nonediv class="shadow-none ...">div>Using a custom valueUse utilities like shadow-[],inset-shadow-[],ring-[], and inset-ring-[] to set the box shadow based on a completely custom value:div class="shadow-[0_35px_35px_rgba(0,0,0,0.25)] ..."> div>For CSS variables, you can also use the shadow-() syntax:div class="shadow-(--my-shadow) ..."> div>This is just a shorthand for shadow-[var()] that adds the var() function for you automatically.Responsive designPrefix a box-shadow utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:div class="shadow-none md:shadow-lg ..."> div>Learn more about using variants

CSS Box ShadowCSS box-shadow PropertyThe CSS box-shadow property is used to apply one or more shadows to an element.Specify a Horizontal and a Vertical ShadowIn its simplest use, you only specify a horizontal and a vertical shadow. The default color of the shadow is the current text-color.A element with a box-shadowExample Specify a horizontal and a vertical shadow: div{ box-shadow: 10px 10px;}Try it Yourself »Specify a Color for the ShadowThe color parameter defines the color of the shadow.A element with a lightblue box-shadowExample Specify a color for the shadow: div{ box-shadow: 10px 10px lightblue;}Try it Yourself »Add a Blur Effect to the ShadowThe blur parameter defines the blur radius. The higher the number, the more blurred the shadow will be.A element with a 5px blurred, lightblue box-shadowExample Add a blur effect to the shadow: div{ box-shadow: 10px 10px 5px lightblue;}Try it Yourself »Set the Spread Radius of the ShadowThe spread parameter defines the spread radius. A positive value increases the size of the shadow, a negative value decreases the size of the shadow.A element with a blurred, lightblue box-shadow, with a spread radius of 12pxExample Set the spread radius of the shadow: div{ box-shadow: 10px 10px 5px 12px lightblue;}Try it Yourself »Set the inset ParameterThe inset parameter changes the shadow from an outer shadow (outset) to an inner shadow.A element with a blurred, lightblue, inset box-shadowExample Add the inset parameter: div{ box-shadow: 10px 10px 5px lightblue inset;}Try it Yourself »Add Multiple ShadowsAn element can also have multiple shadows:Example div{ box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;}Try it Yourself »CardsYou can also use the box-shadow property to create paper-like cards: Hardanger, NorwayCSS Shadow PropertiesThe following table lists the CSS shadow properties: Property Description box-shadow Adds one or more shadows to an element text-shadow Adds one or more shadows to a text ★ +1 Track your progress - it's free!

The web page UI design with custom scrollbar adds an extra value to your website. Custom scrollbars make the website feel and look different. The browser’s scrollbar can be customized using CSS. Using CSS pseudo-element, you can easily change the default scrollbar style with your custom style. In this tutorial, we will show how you can make custom scrollbar and customize the look of the browser’s scrollbar with Webkit (pseudo element).WebKit allows you to styling scrollbars with your custom CSS. If scrollbar pseudo-element is defined, WebKit turns off the built-in scrollbar style and use the style provided in CSS under ::-webkit-scrollbar element.Here we’ll provide short CSS code snippet to change the default scrollbar style and create a custom scrollbar with WebKit. We’ll use only 3 pseudo-element, webkit-scrollbar, webkit-scrollbar-track, and webkit-scrollbar-thumb in WebKit. Use the following CSS in your web page to make custom scrollbars.Custom Scrollbar Style 1:::-webkit-scrollbar { width: 12px;}::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;}::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}Custom Scrollbar Style 2:::-webkit-scrollbar { width: 12px;}::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;}::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}Custom Scrollbar Style 3:::-webkit-scrollbar{ width: 12px; background-color: #F5F5F5;}::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}::-webkit-scrollbar-thumb{ background-color: #F90; background-image: -webkit-linear-gradient(90deg,rgba(255, 255, 255, .2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, .2) 50%,rgba(255, 255, 255, .2) 75%,transparent 75%,transparent)}Custom Scrollbar in DivYou can create custom scrollbar for div content with Webkit. The element class or id need to be specified in webkit-scrollbar, webkit-scrollbar-track, and webkit-scrollbar-thumb. The following code snippets makes custom scrollbar for a specific div using CSS.HTML Code:div class="content"> div>CSS Code:.content::-webkit-scrollbar { width: 12px;}.content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;}.content::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);}Scrollbar Selectors (Pseudo Elements)The following pseudo elements are available for customizing the browser’s scrollbar.::-webkit-scrollbar – Select the scrollbar.::-webkit-scrollbar-button – Select the buttons on the scrollbar.::-webkit-scrollbar-thumb – Select the draggable scrolling handle.::-webkit-scrollbar-track – Select the progress bar of the scrollbar.::-webkit-scrollbar-track-piece – Select the progress bar without handle.::-webkit-scrollbar-corner – Select the bottom corner of the scrollbar.::-webkit-resizer – Select the draggable resizing handle.ConclusionIn our example code snippet, only some basic styles are provided for the custom scrollbar. You can change the custom scrollbars style based on your web page UI. To customize the scrollbar, specify the CSS with ::-webkit-scrollbar, ::-webkit-scrollbar-track, and ::-webkit-scrollbar-thumb pseudo elements. CSSScrollbarWebkit Do you want to get implementation help, or enhance