Générateur d'Ombres CSS

Générez de belles ombres CSS avec aperçu en temps réel. Ajustez le décalage horizontal, vertical, le rayon de flou, l'étendue et la couleur — copiez le code CSS généré instantanément.

0px
4px
8px
0px
15%

Aperçu en Temps Réel

Ajustez les contrôles pour voir l'effet d'ombre en temps réel

NeoToolkit

CSS Généré

box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);

About CSS Box Shadow Generator

Our CSS Box Shadow Generator is a free online tool that helps web designers and developers create beautiful, customizable box shadows for their websites. With a live visual preview and instant CSS code generation, you can experiment with different shadow effects — from subtle material shadows to glowing neon effects — and copy the code directly into your stylesheet. All processing happens in your browser, ensuring complete privacy.

Features

How to Use

  1. Select a preset (Material, Soft, Hard, Glow, Neon, or Floating) or start from scratch
  2. Adjust the Horizontal Offset slider to control left/right shadow direction
  3. Adjust the Vertical Offset slider to control up/down shadow direction
  4. Set the Blur Radius to control how soft or sharp the shadow edges appear
  5. Use the Spread Radius to expand or shrink the shadow beyond the element
  6. Pick a shadow color and opacity, then click "Copy CSS" to get the code

Use Cases

Frequently Asked Questions

What is a CSS box shadow?

A CSS box shadow is a visual effect that adds a shadow behind or inside an HTML element. It creates depth and elevation, making flat designs look more realistic and interactive. The effect is created using the CSS box-shadow property.

Is this tool free to use?

Yes, our CSS Box Shadow Generator is completely free to use. There are no ads, no sign-ups, and no limitations. You can generate as many shadows as you need.

What browsers support CSS box-shadow?

CSS box-shadow is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It has been widely supported since around 2011, so compatibility is excellent.

Can I create multiple shadows at once?

This tool generates a single shadow at a time. For multiple layered shadows, you can generate each one separately and combine them manually in your CSS using comma-separated values in the box-shadow property.

What is an inset shadow?

An inset shadow appears inside the element rather than outside. It creates a recessed or pressed effect, commonly used for buttons that look pushed in or for creating inner depth on containers.

How do I make a glow effect?

To create a glow effect, set both Horizontal and Vertical Offset to 0, use a larger Blur Radius (15-30px), choose a bright color, and increase the opacity. You can also add a positive Spread Radius to intensify the glow.

Why does my shadow look different in different browsers?

While CSS box-shadow is well-supported, subtle rendering differences can occur between browsers due to how each engine handles anti-aliasing and color blending. The differences are usually minor and the shadow will look great across all modern browsers.

Can I use this for commercial projects?

Absolutely! The CSS code generated by this tool is standard CSS that you can use in any project — personal, commercial, or open source. There are no restrictions on how you use the generated code.

Related Tools