toolsko

Choose your language

ToolsKo is written in English. Prefer another language? Open a translated version of this public page.

Browser language suggestion: English. You can choose any language below.

Translation opens in a new tab using Google Translate. It receives this public page URL. Automatic translations may contain mistakes; use the original English page for tool inputs, downloads, and generated documents.

Your choice is remembered on this browser when storage is available. Use Language in the header to change it.

CSS Gradient Generator

Linear and radial gradients with copy-ready CSS.

Tool inputs stay in your browser · optional AI search sends your query

How to use it (step by step)

  1. 1Fill in the boxes: “Color 1”, “Color 2”, “Type”, “Angle (linear)”. Example numbers are already there so you can see how it works; replace them with yours.
  2. 2The result updates instantly as you type (on a phone it is below the boxes).
  3. 3The bold line is the main answer. Tap Copy next to any value to copy it.

Words to know

Gradient
A smooth blend from one color into another.
CSS
The code that controls how a web page looks: colors, sizes, spacing and layout.

More in Design & Color

Print Bleed & Crop Marks BuilderAdd edge-extended bleed and crop marks to a print-sized image.Rotate & Flip ImageRotate by exact right angles and mirror your image without cropping.Rounded Corners Image MakerCut rounded corners into an actual image with transparent PNG edges.Image Border & Padding MakerAdd an even colored frame without covering your image.PNG Opacity EditorMake an image more transparent and download the actual PNG.Single Color to TransparentRemove one selected flat color from logos or graphics.