Customize a shadow, see it instantly, and copy ready-to-use CSS for cards, buttons, panels, and other elements.
Shadow settings
Live preview
Generated CSS
The preview updates as you change the controls.
How to use CSS box shadows
The box-shadow property adds a shadow around an element. Horizontal and vertical offsets position the shadow, blur softens its edges, spread expands or contracts it, and opacity controls its transparency. Enable inset to draw the shadow inside the element.
Copy the generated declaration into your stylesheet. For example, use it in a card class: .card { box-shadow: 0 8px 24px 0 rgba(0, 0, 0, .2); }. Shadows are decorative and should not be the only way to indicate an important interactive state.
How to Create CSS Box Shadows for Your Website
CSS box shadows are an easy way to add depth, dimension, and visual interest to website elements. With the CSS box-shadow property, you can create subtle shadows that make cards appear elevated, add depth to buttons, or create more dramatic effects around images and content sections. Shadows help separate elements from their backgrounds and can make a website feel more polished and visually organized.
Our free CSS Box Shadow Generator makes it easy to experiment with different shadow effects without writing CSS manually. Adjust the shadow's horizontal and vertical position, blur, spread, color, and opacity while watching the results update instantly. You can also create inset shadows that appear inside an element rather than outside it. Once you're happy with the result, simply copy the generated CSS and paste it into your website's stylesheet.
CSS Box Shadow Blur vs. Spread: What's the Difference?
Blur and spread both affect the appearance of a box shadow, but they serve different purposes.
Blur radius controls how soft the shadow's edges appear. A blur radius of 0px produces a sharp, clearly defined shadow. Increasing the blur radius creates a softer, more diffused effect. Larger blur values are often used for floating cards, modal windows, and other elements that need a subtle sense of elevation.
Spread radius controls the size of the shadow before blur is applied. A positive spread value expands the shadow outward, while a negative value contracts it. Unlike blur, spread changes the shadow's overall dimensions rather than simply softening its edges.
For example, a shadow with a large blur and negative spread can create a soft, concentrated effect beneath an element. A shadow with little blur and positive spread produces a more pronounced outline.
Example: Soft Shadow
Example: Sharp Shadow
How to Create an Inset Box Shadow in CSS
An inset box shadow appears inside an element rather than outside its borders. This effect can make a button look pressed, give a form field a recessed appearance, or add depth to containers and panels.
To create an inset shadow, add the inset keyword to the box-shadow property.
Inset shadows are particularly useful for input fields, pressed button states, and interface elements where you want to create the appearance of depth without making the element look elevated.
Understanding the CSS box-shadow Property
The CSS box-shadow property adds one or more shadow effects around an HTML element. A typical box shadow uses several values that control its appearance:
- Horizontal offset (5px): Moves the shadow left or right. Positive values move it right, while negative values move it left.
- Vertical offset (10px): Moves the shadow up or down. Positive values move it down, while negative values move it up.
- Blur radius (20px): Controls how soft or sharp the shadow appears.
- Spread radius (0px): Controls how much the shadow expands or contracts.
- Color: Defines the shadow's color and transparency.
By adjusting these settings, you can create anything from a barely noticeable shadow to a bold, dramatic effect.
Frequently Asked Questions About Font Pairing
What is font pairing?
Font pairing is the process of selecting two or more typefaces that work well together in a design. In web design, one font is often used for headings and another for paragraphs and other body text. A good font pairing creates visual hierarchy, improves readability, and gives a website a consistent appearance.
What are the best font combinations for websites?
Some popular font combinations include Playfair Display with Inter, Montserrat with Open Sans, Merriweather with Lato, and Poppins with Nunito Sans. The best combination depends on your website's purpose, brand personality, and audience. A professional business website may benefit from clean, understated typography, while a creative portfolio might use more expressive heading fonts.
Should I use serif or sans-serif fonts for my website?
Both serif and sans-serif fonts can work well on websites. Sans-serif fonts are frequently used for navigation, interfaces, and body text because of their clean appearance. Serif fonts can add personality and sophistication to headings and long-form content. The best choice depends on the specific typeface, font size, spacing, and overall design rather than whether the font has serifs.
Can I pair two sans-serif fonts together?
Yes. Two sans-serif fonts can create an attractive combination when they have enough visual contrast. For example, a bold geometric font such as Montserrat can work well for headings alongside a more neutral font such as Open Sans for body text. Avoid pairing fonts that look almost identical unless there is a clear reason for doing so.
How many different fonts should a website use?
Most websites benefit from using one or two font families. One font can be used for headings and another for body text, or a single versatile font family can provide different weights and styles. Using too many fonts can create visual clutter and increase page loading