A CSS3Gen alternative, property by property
People searching this way want the correct syntax for a specific CSS3 property, with a preview to confirm the values are right.
Convertto has a generator for each of the CSS3 properties whose syntax is hard to hold in your head: `box-shadow`, `text-shadow`, `transform`, `border-radius`, `filter`, `transition` timing and gradient backgrounds. Each one is built around the property's own arguments, previews live, and outputs the rule as plain CSS.
- Organised by
- The CSS property, not by visual effect
- Output
- A single plain CSS declaration or rule
- Vendor prefixes
- Not emitted. The properties here have been unprefixed for years
- Cost
- Free, no sign-up
What you are looking for, and the tool that does it
| The job | Convertto tool | What it does |
|---|---|---|
| box-shadow | CSS Box Shadow Generator | Offset, blur, spread, colour and inset, with a layered variant |
| text-shadow | CSS Text Shadow Generator | Offset, blur and colour, including stacked shadows for outlines |
| border-radius | CSS Border Radius Generator | Per-corner radii including the two-value elliptical form |
| transform | CSS Transform Generator | Builds a 2D or 3D transform visually, with the transform origin handled |
| transition timing | Cubic Bezier Easing Generator | Draws the easing curve and outputs the cubic-bezier() value |
| linear-gradient and friends | CSS Gradient Generator | Linear, radial and conic gradients with any number of stops |
| filter | CSS Filter Generator | Blur, brightness, contrast, saturate, hue-rotate and drop-shadow |
| animation | CSS Animation Generator | Generates keyframe animations: fade, slide, bounce, pulse, spin and shake |
| rgba and colour formats | Colour Converter | Converts a colour to HEX, RGB, HSL, HSV, CMYK and LAB, with contrast and harmonies |
The properties worth generating
Not every property needs a tool. color, padding and display are quicker typed. The ones below are worth a generator because their value is a list of positional arguments whose effect is not obvious from the numbers.
| Property | Value shape | What is hard about it |
|---|---|---|
box-shadow | x y blur spread colour, optionally inset, comma-separated | Four length values whose interaction is only visible rendered |
text-shadow | x y blur colour, comma-separated | Stacking four copies to fake an outline is not obvious |
border-radius | Up to eight values split by a slash | The elliptical form reads as nonsense until you see it |
transform | A space-separated list of functions | Order matters: rotate then translate differs from the reverse |
cubic-bezier() | Four control-point numbers | Nobody reads an easing curve from four decimals |
linear-gradient() | Angle plus colour stops with optional positions | Stop placement is where the banding lives |
filter | A space-separated list of functions | Functions compose in order, and some of them are expensive |
Transform order is not commutative
This is the single most common CSS3 surprise. Transform functions apply left to right against a moving coordinate system, so rotating and then translating moves the element along its own rotated axis, while translating and then rotating moves it along the page axis and spins it in place. The generator composes the list in the order you add functions, so the preview shows you which one you asked for.
/* moves 100px along the rotated axis */
transform: rotate(45deg) translateX(100px);
/* moves 100px right, then spins in place */
transform: translateX(100px) rotate(45deg);Vendor prefixes are over
Beyond single properties
Layout has its own generators: flexbox, grid, multi-column and media queries. For the parts of CSS that are reasoning rather than syntax, there is a specificity calculator and a z-index and stacking context checker. The CSS generators hub has the full list.
Frequently asked questions
Does the output include vendor prefixes?
Why does my transform go the wrong way?
Can I generate keyframe animations?
Is any of this sent to a server?
Open a tool
Last updated
Browse css generators