How do I add a shadow to a box in CSS?

You can add a shadow using the CSS 'box-shadow' property. The syntax is: box-shadow: [inset] [offset-x] [offset-y] [blur-radius] [spread-radius] [color]. Our visual tool lets you design this shadow using simple sliders and copy the complete cross-browser code instantly.

What is the CSS syntax for linear gradients?

A CSS linear gradient is set using the background or background-image property: background: linear-gradient(direction, color-stop1, color-stop2, ...). You can define the direction in degrees (e.g. 135deg) or as keywords (e.g. to right).

What is a radial gradient in CSS?

A radial gradient transitions colors starting from a central point (the shape center) and moving outwards. The syntax is: background: radial-gradient(shape size at position, start-color, ..., last-color).

CSS Shadow & Gradient Designer

Design beautiful shadow effects and multi-stop CSS gradients visually, preview instantly, and grab the code.

Shadow Settings

Offset X

10px

Offset Y

10px

Blur Radius

20px

Spread Radius

0px

Shadow Opacity

30%

Shadow Color

Inset Shadow

Visual Preview & CSS

Generated CSS Code

box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.3);

Gradient Settings

Gradient Type

Angle (deg)

135°

Color Stop 1

Color Stop 2

100%

Visual Preview & CSS

Generated CSS Code

background: linear-gradient(135deg, #52d9c5 0%, #0d5c48 100%);

Frequently Asked Questions

What is a box shadow in CSS?

A box-shadow is a CSS property used to cast a shadow effect from the frame of an element. It supports offset-x, offset-y, blur radius, spread radius, color, and an optional 'inset' parameter to push the shadow inside the box.

How does a gradient background work?

Gradients are CSS images that smoothly transition between two or more colors. Linear gradients transition colors along a straight line (angle), while radial gradients transition colors from a center circular origin outwards.

Are these styles cross-browser compatible?

Yes, standard box-shadow and linear/radial gradient properties are fully supported by all modern desktop and mobile browsers, including Chrome, Safari, Firefox, and Edge.

Does this generator save my designs?

No, all designs are calculated locally on your device. The tool does not store or upload your color configurations or shadow choices, ensuring complete layout design privacy.