CSS generator

Tune shadows, gradients, and backgrounds, then copy the CSS.

Usage guide

Your input stays in this browser.

Result

Your result will appear here.

Code examples

Starting points for your own code. Run them in the environment shown below.

Language · example

CSS stylesheet

Current inputs apply only to fields used by the example. Selected files are not embedded.

Install dependencies

.preview {
  background: linear-gradient(135deg, #b6ebbd, #28523e);
  box-shadow: 0 12px 24px rgb(0 0 0 / 20%);
  border-radius: 24px 8px 24px 8px;
}

.radial {
  background: radial-gradient(circle, #b6ebbd, #28523e);
}

Put it to work

Set a 32 px blur and 12 px Y offset for a soft panel shadow.

Details that matter

Format and meaning

A 0deg gradient runs bottom to top. A 90deg gradient runs left to right.

Using it correctly

Test CSS on your actual background; shadows and colors depend on surrounding contrast.

Supported scope and limits

Standard CSS box-shadow, linear-gradient, and repeating backgrounds

Split inputs that exceed the limit. If a format or algorithm is unsupported, choose a tool that matches your requirements instead of silently changing the format.

Input & options

Result

Code examples

Put it to work

Details that matter

Format and meaning

Using it correctly

Supported scope and limits

Related tools