shadow/space

CSS-SHADOW GENERATOR

CSS code to copy

CSS · SHADOWS · PREVIEW

Generate CSS box shadows and text shadows

Adjust shadow offsets, blur, spread, color, and opacity, then preview the effect on a sample element or text.

Copy the generated CSS declaration and paste it into your stylesheet.

One layer without stretching and inset. Additional layers are retained.
01 / GENERATOR box-shadow · text-shadow · CSS

Adjust the shadow

Element Shadow box-shadow
Text Shadow text-shadow

CSS box shadow · text shadow

Adjust the outer or inner shadow of the element. Each layer can be changed individually.

QUICK PRESETS

Up to 5 layers in full mode

READY CSS

box-shadow

Preview and CSS are updated immediately, without reloading pages.

CSS shadow generator capabilities

  • Creating an external and internal shadow of an element using box-shadow.
  • Setup text shadows through text-shadow and check your text in the preview.
  • Multiple layers with separate offset, blur, stretch, color and transparency.
  • Ready presets, easy mode, instant preview and copy of ready CSS.
  • Russian explanations and standard English names of CSS properties.

Stretch and inset apply only to box-shadow. For the property text-shadow there is no stretch and internal mode - offset, blur, color and transparency are available for it.

SHADOW/SPACE

How to use the generator

  1. Select a tab box-shadow for element or text-shadow for caption.
  2. Move the offset and blur sliders. The color and transparency of each layer are adjusted separately.
  3. In full mode, add layers, change their stretch and enable inset for the inner shadow of an element.
  4. Select a preset to quickly start with a ready-made effect. You can enter your text in the tab text-shadow.
  5. Copy the shown property with the “Copy CSS” button. The code and both previews are updated without rebooting.

Simplified mode shows one base layer and removes additional options. The remaining layers are saved if you return to full mode.

NOT ACTION COMPLETED

Check settings