Free
Word to HTML Converter
Turn Word documents (.docx) or text pasted from Word into clean HTML or Markdown for any website, CMS or email.
CSS Gradient & Box Shadow Generator
Build linear, radial and conic gradients or layered box and text shadows, watch them update live, and copy the CSS or a Tailwind class. Everything happens in your browser.
Design it
Presets
Colour stops
Click the bar to add a stop, drag the handles to move them, or use the arrow keys on a handle (Shift for bigger steps, Delete to remove).
Presets
Layers
No layers yet. Press Add to create a shadow.
Preview & CSS
CSS
Tailwind CSS class
An arbitrary-value class for Tailwind CSS v3 and v4. Spaces are written as underscores, as Tailwind expects.
About the tool
How the CSS Gradient & Box Shadow Generator works
The CSS Gradient & Box Shadow Generator lets you design two of the most used CSS effects by eye instead of by trial and error. In Gradient mode you choose a linear, radial or conic gradient, set the angle or centre point, and add as many colour stops as you like. Click the gradient bar to add a stop with the colour already at that spot, drag the handles to move stops, or type exact positions and opacity. Stops can be reordered, reversed or spaced evenly, and the repeating option turns a few stops into stripes, rings or pie slices.
In Shadow mode you build box-shadow or text-shadow effects from one or more layers. Each layer has its own horizontal and vertical offset, blur, spread, colour, opacity and inset setting, and you can hide, duplicate or reorder layers to see what each one adds. Presets give you a starting point for soft card shadows, smooth layered shadows, hard offset shadows, neumorphic and pressed styles, glows, focus rings, neon text and retro text. The preview box can be square, rounded, round or pill-shaped, with any box and background colour.
The CSS updates as you work. Choose HEX, RGB or HSL colours, modern rgb(0 0 0 / 20%) syntax or the classic rgba() form, and optionally add fallbacks such as a solid background colour and -webkit- prefixed gradients for very old browsers. You also get a Tailwind CSS arbitrary-value class for v3 and v4. The tool is rule-based and does not use AI. Everything runs in your browser, so nothing you make is uploaded.
Frequently asked questions
How do I add or move a colour stop?
Click anywhere on the gradient bar to add a stop there; it takes the colour the gradient already has at that point. Drag a handle to move it, or select a handle and use the arrow keys (hold Shift for steps of 10%). You can also type an exact position and opacity in the stop list, and press Delete on a handle to remove it.
What is the difference between linear, radial and conic gradients?
A linear gradient changes colour along a straight line at the angle you choose. A radial gradient spreads out from a centre point as a circle or ellipse. A conic gradient sweeps around a centre point like the hands of a clock, which is handy for colour wheels and pie charts.
Can I use several shadows on one element?
Yes. CSS lets you list several shadows separated by commas, and the first one in the list is drawn on top. Add, duplicate, hide and reorder layers in the tool to build smooth layered shadows, neumorphic effects or glows, and the CSS lists them in the right order.
Do I need vendor prefixes such as -webkit-?
No, not for current browsers. Gradients, box-shadow and text-shadow have worked without prefixes for many years, so the tool leaves them out by default. Tick Add fallbacks for old browsers if you must support very old Safari or Android browsers; conic gradients have no prefixed version.
How do I use the Tailwind class?
Copy the class and add it to your element, for example class="bg-[linear-gradient(...)]" or class="shadow-[...]". Tailwind CSS v3 and v4 support these arbitrary values, and the tool replaces spaces with underscores as Tailwind expects. Text shadows use an arbitrary property, [text-shadow:...].
Is anything I make uploaded?
No. The tool is a set of rules that runs in your browser, so your colours and settings never leave your device. It does not use AI, and it keeps working if you go offline after the page has loaded.
More free AI tools
- Developer
- SEOFree
Open Graph & Social Preview Checker
Preview how your page looks when shared on Facebook, X, LinkedIn, WhatsApp and Slack, and fix your Open Graph tags.
- DesignFree
Color Palette from Image
Extract the main colours from any image and copy them as HEX, RGB or HSL, or export CSS, Tailwind and JSON.