NerdBible
Sign in

Tools

More
All toolsAudioCalculatorsColour & CSSDeveloperEverydayHardware TestsImagePDF & DocumentsSecurity & PrivacyTextWeb & Marketing
More
Aspect ratioColoursContrastCSSCSS unitsPalette

CSS Generator: Gradient, Shadow & Radius

Gradients, box shadows and rounded corners with live preview and copy-ready CSS.

Free tools that run in your browser. Nothing you type, open or create is uploaded to NerdBible or anyone else.

Drag the markers on the bar to move a colour stop, or use the arrow keys on a marker.

CSS

  


  

  



The preview is drawn by your own browser from the same CSS you copy. Conic gradients and repeating gradients work in every current browser; very old browsers ignore them.



  
How to use it

  
  1. Pick a tab: Gradient, Box shadow or Border radius.
  2. Change the settings and watch the preview update. For gradients drag the stop markers; for shadows add as many layers as you need.
  3. Press Copy and paste the CSS rule into your stylesheet.





  
Questions

  
What is the difference between linear, radial and conic gradients?
A linear gradient changes colour along a straight line at the angle you choose. A radial gradient spreads out from a centre point as a circle or ellipse. A conic gradient sweeps around a centre point like the hands of a clock, which is how pie charts and colour wheels are drawn.
Why use several shadow layers?
Real shadows are soft near the object and fade further away. Stacking a small sharp shadow with a larger blurred one looks more natural than a single shadow, which is why many design systems use two or three layers.
What does an elliptical corner do?
Each corner gets a horizontal and a vertical radius. When they differ, the corner is a quarter of an ellipse rather than a circle, which gives leaf and blob shapes. In CSS the vertical values come after a slash.
Do I need vendor prefixes?
No. Gradients, box shadows and border radius have worked without prefixes in every mainstream browser for years.




        

    
About this tool

    
About the CSS generator
Gradients, shadows and rounded corners are quick to describe and fiddly to write by hand. This generator gives you controls and a live preview, and the preview is drawn by your browser from exactly the CSS you copy, so what you see is what you get.
Gradient
Choose linear, radial or conic, set the angle or centre, and drag the colour stops along the bar. A linear gradient changes colour along a straight line; a radial one spreads out from a point as a circle or ellipse; a conic one sweeps around a point like the hands of a clock, which suits pie charts and colour wheels. Repeating gradients are available too.
Box shadow
Set the offset, blur, spread, colour and inset, and add as many layers as you like. Real shadows are sharp near an object and soft further away, so stacking a small tight shadow with a larger blurred one looks more natural than a single shadow.
Border radius
Round all four corners together or each one separately. Give a corner different horizontal and vertical radii for an elliptical curve, which produces leaf and blob shapes; in CSS the vertical values come after a slash.
No vendor prefixes are needed in any current browser. Everything runs in your browser.
  

        

    
Related tools