toolsko

Choose your language

ToolsKo is written in English. Prefer another language? Open a translated version of this public page.

Browser language suggestion: English. You can choose any language below.

Translation opens in a new tab using Google Translate. It receives this public page URL. Automatic translations may contain mistakes; use the original English page for tool inputs, downloads, and generated documents.

Your choice is remembered on this browser when storage is available. Use Language in the header to change it.

CSS Box Shadow Generator

Create a CSS box-shadow from offsets, blur and opacity.

Tool inputs stay in your browser · optional AI search sends your query

Good to know: Offsets and spread may be negative; blur must be non-negative. Generates a black translucent outer shadow. Copy into your stylesheet and review in the actual layout.

How to use it (step by step)

  1. 1Fill in the boxes: “Horizontal offset (px)”, “Vertical offset (px)”, “Blur (px)”, “Spread (px)”, “Black opacity (%)”. Example numbers are already there so you can see how it works; replace them with yours.
  2. 2The result updates instantly as you type (on a phone it is below the boxes).
  3. 3The bold line is the main answer. Tap Copy next to any value to copy it.

Words to know

CSS
The code that controls how a web page looks: colors, sizes, spacing and layout.
Alpha mask / opacity
Alpha controls how see-through a pixel is. An alpha mask shows that as black (invisible), white (solid) and grey (partly see-through).
Resolution / pixels
A picture is made of tiny dots called pixels. 1080×1920 means 1,080 dots wide and 1,920 tall.
Percentage
A part out of 100. 25% of 200 = 50.

More in Design & Color

Image Difference HeatmapCompare two same-size images and export a visible difference map.Halftone Dot Image MakerTurn a photo into a printable-looking black-dot raster effect.RGB Channel SplitterExport separate grayscale red, green and blue channel images.Color ConverterHEX ↔ RGB ↔ HSL, with a live swatch.Color Contrast CheckerWCAG contrast ratio for text and background colors.CSS Gradient GeneratorLinear and radial gradients with copy-ready CSS.