Developer & Security
Set colors, angles and shadows visually, then copy the code. Ready-made examples help you start quickly.
Free · no sign-up · runs in your browser · updated
Ready-made examples
Type
CSS
background: #ff6a00;
background-image: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);Tailwind CSS (arbitrary-value class)
bg-[linear-gradient(135deg,_#ff6a00_0%,_#ee0979_100%)]Choose the Gradient or Box shadow tab, then start from an example or set it up yourself.
Change colors, positions, angle, blur and spread while watching the live preview.
Copy the CSS code or the Tailwind class into your project.
A linear gradient flows in a straight line at a given angle (0° points up, 90° points right), a radial gradient spreads from a single point in a circle or ellipse, and a conic gradient rotates around a center point like a color wheel. Every gradient needs at least two color stops with a position of 0–100% and an opacity; stops are sorted automatically. The generated code includes a fallback base color for browsers that don’t support gradients.
A shadow is made of an X offset, Y offset, blur, spread, color, and an inset option for inner shadows. Several layers are separated by commas for a more natural sense of depth, for example one sharp shadow close to the object and one soft shadow farther away. The result can be copied as a CSS declaration or as a Tailwind arbitrary-value class (spaces inside the value are written as underscores).
Use background-image: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%). This tool builds that value from the colors and positions you choose.
Blur softens the edge of the shadow; spread grows or shrinks the shadow before it is blurred. A negative spread value makes the shadow smaller than the element.
Copy the arbitrary-value class, for example bg-[linear-gradient(...)] or shadow-[...]. Spaces inside the value are written as underscores (_).
No. Everything is calculated in your browser.
Need more than tools?
These tools are only a small part of what Tipamedia can build. Tell us what you need and we will help you work out the next step.