CSS generator. Shadow, gradient, radius, glass.

How to use the CSS Generator

This generator builds four kinds of CSS: box shadows, linear and radial gradients, border radius and glassmorphism panels. Each control redraws a real element in the live preview and rewrites the code under it, so what you copy is exactly what you see. It is for developers and designers who want a correct rule without guessing values.

Step by step

1. 1
   Pick a generator

   Choose a tab: Box Shadow, Gradient, Border Radius or Glassmorphism. Opening a tab loads that generator with its default values, so copy your CSS before you move to another tab.

2. 2
   Build a box shadow

   On Box Shadow, set Offset X and Offset Y from minus 100 to 100 px, Blur from 0 to 150 px and Spread from minus 50 to 50 px. Choose a Shadow color and an Opacity from 0 to 100%. Tick Inset shadow for a pressed or inner look.

3. 3
   Build a gradient

   On Gradient, pick Linear or Radial and set the Angle from 0 to 360 degrees (linear only). Each color stop has a color swatch and a position slider. Press + Add color stop for up to six stops, or the cross beside a stop to remove it when there are more than two.

4. 4
   Round the corners

   On Border Radius, Link all corners starts ticked, so moving any slider moves all four. Untick it to set Top-left, Top-right, Bottom-right and Bottom-left separately, each from 0 to 150 px.

5. 5
   Make a glass panel

   On Glassmorphism, set Blur from 0 to 40 px, Transparency, Tint color, Border opacity and Corner radius from 0 to 60 px. The preview sits on a colored gradient because the frosted effect only shows when something is behind the panel.

6. 6
   Copy the CSS

   Read the code under generated css and press copy CSS. The button reads copied for a moment. Paste the declarations inside the selector you want to style.

Reading the code

• With the defaults the Box Shadow tab gives box-shadow: 8px 12px 30px 0px rgba(15,23,19,0.18); The four lengths are the X offset, Y offset, blur and spread, and the last number in rgba is your Opacity divided by 100.
• Gradient stops are written in position order, whatever order you added them in. The default is linear-gradient(135deg, #6fa37a 0%, #cd8a4b 100%). Radial gradients are written as circles and ignore the angle.
• Border radius collapses to one value, such as border-radius: 18px; when all four corners match. When they differ it lists four values in the order top left, top right, bottom right, bottom left.
• Glassmorphism output has five lines: a background in your tint color with Transparency as its alpha, a prefixed and a standard backdrop-filter, a 1px border and the radius. Transparency 35 becomes an alpha of 0.35, so a higher number makes the panel more solid.

Tips and common mistakes

• Opening a tab resets that tab's controls, so finish and copy one rule before you start another.
• Keep the shadow Opacity low for soft, natural shadows; the default is 18%. Raise Blur rather than Opacity when a shadow looks too hard.
• The glass preview card also has a soft drop shadow that is not in the copied CSS. Add your own box-shadow if you want one.
• backdrop-filter only blurs what is behind the element, so a glass panel on a flat, single color background looks like a plain tinted box.
• The copied code is a set of declarations, not a full rule. Put it inside your own selector, for example a .card class.

Privacy and limits

All code is generated in your browser. Nothing you set is sent anywhere or saved, so reloading the page returns every tab to its defaults. The copy button only uses your clipboard.

Back to the tool

Everything a CSS generator should cover.

Frequently asked questions.

More CSS & design tools.

Browse the full free-tool library →