Color CSS shadow generator
Preview a CSS box shadow and copy the code.
Color CSS shadow generator
Your result appears here
Adjust the values to see your result automatically.
Kako koristiti Color CSS shadow generator
Color CSS shadow generator builds a box-shadow declaration from horizontal and vertical offsets, blur, spread, a shadow color and an opacity from 0 to 1, with an optional inset shadow. It shows a live preview card and outputs a ready-to-copy CSS line that writes the color as rgba.
- Adjust the values; an initial result is calculated from the defaults.
- Change the basic settings or open Advanced mode to fine-tune the result.
- Review and copy or download your result. Pause Live results to run manually. Sources or individual settings above 20,000 characters require an explicit run.
Mogućnosti alata
Preview a CSS box shadow and copy the code.
- Horizontal offset (px)
- Set this value for your task.
- Vertical offset (px)
- Set this value for your task.
- Blur (px)
- Range: 0 to 200
- Spread (px)
- Set this value for your task.
- Shadow color
- Set this value for your task.
- Opacity
- Range: 0 to 1
- Inset
- Set this value for your task.
Ograničenja i obrada
Use finite numbers, valid dates and the ranges shown by each control. Invalid values produce an error without a downloadable result.
Primjer unosa
Hello ToolCabana
Česta pitanja
How do I make an inset box shadow in CSS?
Turn on the Inset option. The generated declaration then starts with the inset keyword, and the preview card shows the shadow inside its edges instead of outside.
How do I set the transparency of a CSS shadow?
Use the Opacity slider, from 0 to 1 in steps of 0.01. The chosen color is converted to rgba with that alpha value, so the default of 0.15 gives a soft shadow.
What is the maximum blur for the shadow generator?
Blur accepts whole pixel values from 0 to 200. The horizontal and vertical offsets and spread can be negative, which moves or shrinks the shadow.
Where is my input processed?
This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.
What are the input limits?
Use finite numbers, valid dates and the ranges shown by each control. Invalid values produce an error without a downloadable result.