CSS Generator
Visually generate CSS for border-radius, box-shadow, and gradients — see a live preview and copy the code instantly.
Border Radius
Box Shadow
Gradient
Live Preview
Generated CSS
About CSS Generator
Our free CSS Generator is a visual tool that helps you create CSS properties for border-radius, box-shadow, and gradients without writing code by hand. Adjust values with intuitive controls, see changes in real time on the live preview, and copy the generated CSS code with one click.
The border-radius generator supports individual corner values, so you can create anything from perfect circles to asymmetric shapes. The box-shadow generator lets you control offset, blur, spread, color, and opacity, plus toggle between regular and inset shadows. The gradient generator supports linear gradients in eight directions plus radial (circular) gradients.
This tool is perfect for designers and developers who want to experiment with CSS values visually rather than guessing numbers. The checkerboard preview background makes it easy to see transparency effects in shadows. All changes update the preview and generated code instantly in your browser — no server calls needed.
Frequently Asked Questions
Q How does border-radius work with four different values?
When you specify four values for border-radius, they apply clockwise starting from the top-left: top-left, top-right, bottom-right, bottom-left. For example, border-radius: 20px 0 20px 0 creates a shape with rounded corners on the top-left and bottom-right. When "Link all corners" is checked, all four values change together for uniform rounding.
Q What is the difference between blur and spread in box-shadow?
Blur controls the softness of the shadow's edges — higher values create a more diffused, softer shadow. Spread controls the size of the shadow — positive values make the shadow larger than the element, negative values make it smaller. A shadow with 0 blur and positive spread creates a solid, sharp-edged shadow copy of the element.
Q What is the difference between linear and radial gradients?
Linear gradients transition colors along a straight line in a specified direction (top to bottom, left to right, diagonal, or any angle). Radial gradients transition colors outward from a center point in a circular or elliptical pattern. Linear gradients are most common for backgrounds and buttons, while radial gradients are often used for highlighting, lighting effects, and focal points.