CSS Box Shadow Generator

What is Online CSS Box Shadow Generator?

CSS Box Shadow Generator is a free online tool that allows you to create CSS box shadows in any color or size. You can get the CSS code for the box-shadow you want by tweaking the settings, previewing it as a box, circle, or header, and then copying it.

The CSS box-shadow property has several properties that must be set. The following are some of them. Parameters that are optional are shown in parenthesis.

• Inset: "inset" is a flag-like optional parameter that transforms the shadow from outer to inner. The shadow is outset by default, and you don't need to add anything in CSS to change it. To modify its default position, simply type "inset."
• Horizontal Offset: Horizontal offset, also known as h-offset, is the distance between the shadow and the x-axis center. It's a mandatory parameter. It could be either favorable or bad. The shadow is cast to the left of the box for negative values, and to the right for positive values.
• Vertical Offset: The vertical offset, often known as v-offset, is the distance between the shadow and the y-axis center. It's a mandatory parameter. It could be either favorable or bad. The shadow is placed above the box when the value is negative, and below the box when the value is positive.
• Blur: Blur refers to the amount of blur imparted to shadows. It has to be either 0 or 1. Blur is a parameter that can be turned on or off. It will be calculated as zero if you do not set it.
• Spread: The radius of the shadow spread that will be subtracted or added to the shadow itself is known as the spread. The shadow will be smaller if its value is negative, and vice versa. Spread is a parameter that can be turned on or off. It will be calculated as zero if you do not set it.
• Color: It determines the shadow's color. It's a mandatory parameter.

How to use Online CSS Box Shadow Generator?

1. Set the h-offset, v-offset, blur, and spread sizes in pixels first.
2. Decide on the backdrop, box, and shadow colors. The background and box colors are intended for demonstration purposes. In the CSS code generated, the shadow color will be used.
3. If necessary, activate the checkbox to enable inset shadow.
4. There are three different preview modes to choose from: box, circle, and header. You can inspect the created box-shadow in all settings to see whether it meets your requirements.
5. You can manually copy the CSS code or use the Copy button to do so.

Related Tools

• Color Name Finder: Find the closest CSS color name for any color code
• CSS Color Variable Generator: Generate CSS custom properties for your color palette
• CSS Gradient Generator: Create beautiful CSS gradients with live preview
• CSS Animation Generator: Create standard CSS keyframe animations with visual preview.
• CSS Border Radius Generator: Generate CSS border radius code with real-time visual preview.
• CSS Button Generator: Design beautiful buttons with gradients, shadows, and hover effects.
• CSS Clip Path Generator: Create custom shapes using CSS clip-path property with visual preview.
• CSS Filter Generator: Apply visual filter effects like blur and brightness to elements.
• CSS Flexbox Generator: Create flexible layouts with CSS Flexbox visual preview.
• CSS Grid Generator: Generate CSS Grid layouts with real-time visual preview.
• CSS Loader Generator: Create 100+ pure CSS loading animations (spinners, dots, bars, nature, 3D) with visual preview.
• CSS Minifier Beautifier: Minify or beautify CSS code online
• CSS Text Shadow Generator: Create text shadow effects with visual preview and clean CSS.
• CSS Transform Generator: Generate 2D and 3D CSS transforms with visual preview.