Nine visual CSS generators with a live preview: linear, radial and conic gradients, layered box-shadow, border-radius including organic blob shapes, glassmorphism, text-shadow, clip-path polygons, cubic-bezier easing curves, flexbox and CSS grid. Drag directly in the preview, start from presets, and tap the code to copy clean, standard CSS. Your last settings are remembered.
How to use
- Pick a generator from the row at the top: gradient, box shadow, border radius, glass, text shadow, clip-path, easing, flexbox or grid.
- Change the sliders or drag directly in the preview: gradient stops on the bar, clip-path points, bezier handles, the four border-radius handles.
- Start from a preset under the code if you like.
- Tap the code to copy it. Your last settings for every generator are remembered.
- Click empty space on the gradient bar to add a color stop with the color at that spot.
- In the 8-value border-radius mode the four handles move pairs of values, like “fancy border radius” tools.
- backdrop-filter needs the -webkit- prefix in Safari; the glass code includes both.
- Flexbox and grid: tap a numbered box in the preview to give it its own grow, order or span.
Why generate CSS visually
Properties like box-shadow, clip-path and cubic-bezier take several numbers whose effect is hard to picture. A box-shadow of 0 10px 30px -5px rgba(0, 0, 0, 0.25) reads as offset x, offset y, blur, spread and color; a cubic-bezier(0.34, 1.56, 0.64, 1) overshoots because its second y value is above 1. Dragging the shape and watching the result is faster than editing numbers and reloading.
The output is plain CSS that works in all current browsers without a framework, so it can go straight into a stylesheet, a CSS-in-JS object or a design token file.
Handy reference values
Gradient angles start at the top and turn clockwise: 0deg points up, 90deg to the right, 180deg down. The standard easing keywords map to ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1) and ease-in-out = (0.42, 0, 0.58, 1); x values must stay between 0 and 1. border-radius takes up to eight values, horizontal radii then vertical radii after a slash, which is how blob shapes like 30% 70% 70% 30% / 30% 30% 70% 70% are made.
Tips for good-looking results
Real shadows come from several soft layers rather than one dark one, and shadows tinted with the background hue look less muddy than pure black. Keep glass effects legible by checking text contrast over the busiest part of the background. For layout, flexbox suits one-dimensional rows or columns, while grid handles rows and columns together; tap a box in the preview to give it its own grow, order or span.
Frequently asked questions
Do these CSS effects work in all browsers?
Gradients, box-shadow, border-radius, text-shadow, clip-path, cubic-bezier, flexbox and grid work in all current browsers. backdrop-filter for glass effects needs the -webkit- prefix in older Safari versions, so the generated code includes both.
How do I make a smooth, realistic box shadow?
Stack two or three layers with increasing blur and offset and low opacity, for example 0 1px 2px at 8%, 0 4px 8px at 8% and 0 16px 32px at 8%. The layered presets are a good starting point.
What is the difference between linear, radial and conic gradients?
A linear gradient changes color along a straight line, a radial gradient spreads outward from a center as a circle or ellipse, and a conic gradient sweeps colors around a center like a clock hand, which is useful for pie charts and color wheels.
How do I create a blob shape with border-radius?
Use the eight-value syntax with a slash, such as 30% 70% 70% 30% / 30% 30% 70% 70%. Drag the four handles in the preview to shape it and copy the result.
Can clip-path shapes be animated?
Yes, between polygons with the same number of points. Keep the point count equal, add a transition on clip-path and change the polygon on hover or with a class.
Is the generated code free to use?
Yes. It is ordinary CSS created from your settings, with no license or attribution required.