A CSS generator is a page with sliders on it. You drag things until the preview looks right, and it hands you a line of code to paste into your stylesheet. That works fine until the design changes slightly and you have to go back to the generator instead of editing one number. This page walks through the most common generators and explains, in ordinary words, what every part of the output means, so you can adjust the result yourself.
A gradient is a smooth fade between colours. The output looks like this:
background: linear-gradient(135deg, #ff5f1f 0%, #7b2ff7 100%);The first value is the direction, given as an angle. 0deg fades upward, 90deg fades to the right, 180deg downward. 135deg is the diagonal from top-left to bottom-right, which is why so many generated gradients use it. After that comes a list of colours, each with a position expressed as a percentage of the way across. Move a stop from 50% to 20% and the first colour gets a bigger share.
Two things generators do not tell you. Fading between two colours that sit opposite each other on the colour wheel passes through grey in the middle, which looks dirty — pick colours that are neighbours, or add a third stop to steer the path. And radial-gradient() works the same way but spreads out from a point instead of along a line.
A shadow takes four measurements and a colour, in this order: how far right, how far down, how blurry, and how much bigger or smaller than the element.
box-shadow: 0 1px 2px rgba(0,0,0,.06),
0 4px 12px rgba(0,0,0,.08),
0 12px 32px rgba(0,0,0,.06);The reason that example has three shadows separated by commas is that a single big soft shadow looks like a sticker, while real objects cast a tight dark contact shadow right under them and a wide faint one further out. Stacking two or three, each further down and blurrier and fainter, is what makes a card look like it is sitting on the page rather than floating above it. Keep the horizontal value at 0 unless your whole design agrees on a light source coming from one side.
One value rounds all four corners equally. Four values go clockwise starting at the top-left. The confusing output is the one with a slash in it:
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;The four numbers before the slash are the horizontal reach of each corner's curve; the four after are the vertical reach. Making them different is what turns a rounded rectangle into an organic blob shape, and it is the only thing blob generators are doing. Percentages scale with the element, so the shape stays proportional at any size.
A clip path cuts the element into a shape by listing corner points. Each point is a pair of percentages: how far across, then how far down, with 0% 0% being the top-left.
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);That one is a rectangle with the bottom edge slanted, the diagonal section divider you see on landing pages. Anything outside the shape is simply not drawn — including text and clicks, so do not clip away part of a button.
Easing is how an animation speeds up and slows down. A linear animation moves at one constant speed and looks mechanical. cubic-bezier(.4, 0, .2, 1) is the standard "start quickly, settle gently" curve used for most interface motion, and the four numbers are the positions of two handles on the curve you drag in the generator. Values above 1 in the fourth slot make the animation overshoot and bounce back, which suits a success tick and not a dropdown. As a rule of thumb, things entering the screen should take 200 to 300 milliseconds and things leaving should be faster, around 150.
The frosted-glass panel effect is three declarations working together: a background colour that is mostly transparent, a blur applied to whatever is behind it, and a faint light border to catch the edge.
background: rgba(255,255,255,.08);
backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,.15);The difference between filter and backdrop-filter catches people out: the first blurs the element itself, the second blurs what is behind it. Backdrop blur is expensive to draw, so a page with several of them scrolling can stutter on a phone, and text over a blurred photo often fails contrast — check it before shipping.
Grid generators output a named layout that reads like a picture of the page, which is the rare piece of CSS that explains itself:
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 240px 1fr;Each quoted row is a row of the page, each word is a named area, and repeating a name makes that area span. 1fr means "take whatever space is left". Keyframe generators output the same idea for time instead of space — percentages from 0% to 100% describing where the element should be at each point through the animation. If you want the longer version of how these properties behave together, there is a CSS generators deep dive.