EN繁中日本語

IsekaiKit › Tools

CSS gradient generator

Click the bar to add a color stop and drag stops to move them. The preview and CSS update as you go.

Type
Angle°
Shape
Center

Color stops

Click the bar to add a stop · drag to move · arrow keys nudge · Delete removes

Color
Opacity
Position%




Presets






How to make a gradient
Pick linear, radial or conic, then shape the colors on the bar: click an empty spot to add a stop, drag a stop to move it, and use the color and opacity controls to change the selected one. Set the angle for linear and conic gradients, or the shape and center for radial ones. Press Copy to grab the CSS.
Linear, radial or conic?
Linear blends along a straight line at any angle, great for backgrounds and buttons. Radial spreads out from a point, like a glow or spotlight. Conic sweeps around a center, which makes color wheels and pie charts. Tick Repeating and end the last stop below 100% to get stripes.
Is my data safe?
Yes. Everything runs in your browser. Nothing you paste here is sent to any server.



More to try



      
      JSON Formatter
      Format, validate and minify JSON with clear error messages.
    

      
      Base64 Encode / Decode
      Encode or decode Base64 with full UTF-8 support. Files to data URLs too.
    

      
      URL Encode / Decode
      Percent-encode or decode URLs and see every query parameter.
    

      
      UUID Generator
      Generate UUID v4 or time-ordered v7 in bulk.
    

      
      Unix Timestamp Converter
      Convert epoch seconds or milliseconds to dates and back.
    

      
      Hash Generator
      MD5, SHA-1, SHA-256, SHA-512 hashes of text or files.
    

      
      JWT Decoder
      Decode a JSON Web Token's header and payload, check expiry.
    

      
      Regex Tester
      Test JavaScript regular expressions with live highlighting and groups.
    

      
      Color Converter
      Convert HEX, RGB and HSL, and check contrast on white or black.
    

      
      Password Generator
      Strong random passwords with the options you need.
    

      
      CSS Box Shadow Generator
      Stack shadow layers, try presets, and copy the box-shadow CSS.
    

      
      CSV to JSON Converter
      Convert CSV to JSON and back. Quotes, line breaks, tabs and semicolons handled.
    

      
      YAML to JSON Converter
      Convert YAML to JSON and JSON to YAML, with the exact error line.
    

      
      XML Viewer
      Paste XML and read it as a table, JSON or neat indented XML.
    

      
      Cron Expression Generator
      Read any cron schedule in plain words and see the next run times.
    

      
      Subnet Calculator
      IPv4 and IPv6 subnet math: network, broadcast, host range and splits.
    

      
      Text Diff Checker
      Compare two texts and see added and removed lines.