CSS Gradient Generator
Choose a gradient type and colors to create CSS for a web background. Use two or three colors, with a configurable middle stop in three-color mode. Review the live preview and press Run to generate background-color and background-image declarations.
Key features
- Linear, centered circular radial and conic gradients
- Two or three colors with an adjustable middle stop
- Linear direction or conic starting angle from -360 to 360 degrees
- First color included as a solid background fallback
How to use
- Choose the gradient type and number of colors.
- Set the first and last colors, plus a middle color and position when using three colors.
- Adjust the linear or conic angle, check the preview and press Run to copy the CSS.
Use cases
- Create backgrounds for a hero section or banner
- Compare two-color combinations for cards and buttons
- Explore brand palettes by moving the middle color stop
Frequently asked questions
How do the gradient types differ?
Linear gradients change color along a line. Radial gradients extend outward from a circle at the center. Conic gradients change color around the center. The radial and conic centers are fixed in this tool.
Why does the middle color have no effect?
Choose three colors to apply the middle color and position. Two-color mode keeps these settings but does not include them in the output.
Does the angle apply to a radial gradient?
No. This tool uses a centered circular radial gradient, which does not use an angle. The angle controls linear direction or the starting direction of a conic gradient.
Can I use transparency or more colors?
The tool uses two or three opaque six-digit HEX colors. You can edit the generated CSS to add transparency, repeating patterns or additional stops.
Privacy
Colors and CSS are processed in your browser. Settings and generated CSS are not sent to a conversion server or automatically saved.
References
Related Tools
CSS Box Shadow GeneratorColor Code ConverterCSS MinifierWasm Module InspectorHreflang Matrix CheckerAST Query PlaygroundContainer Build GraphDependency Graph ExplorerSemver Range LabCron Schedule AuditorPatch Review WorkbenchSource Map ExplorerLocalization Catalog AuditorStructured Data ReviewerHTTP Archive AnalyzerWebhook Signature LabProtobuf Schema WorkbenchGraphQL Schema LabAvro Schema EvolutionLocal SQL WorkbenchSchema Form BuilderMesh Repair WorkbenchPipe Network LabRobot Arm Kinematics LabThermal Network LabBeam Response LabGear Train DesignerTolerance Stackup LabSensor Calibration FitPCB Stackup PlannerDigital Filter DesignerNetwork Reachability MapSun Shadow MapGPS Error SimulatorDigital Logic SimulatorAnalog Circuit LabMechanism Linkage LabAnalysis Mesh GeneratorOpenAPI Contract InspectorDatabase Migration PlannerDimensional Equation CheckerTruss Force LabBoolean Minimization LabControl Response LabQueueing Simulation LabGeofence Event SimulatorCoordinate Reference LabSurvey Traverse LabRaster Classification LabChoropleth Design LabMap Print ComposerRaster Reprojection LabElevation Contour MakerTerrain Viewshed LabWatershed DelineatorMap Tile PackagerText File Encoding WorkbenchFilesystem Portability AuditorSBOM License ExplorerFile Signature Auditornpm Lockfile Conflict ResolverSource Secret AuditorOffline Web Package BuilderCertificate Chain InspectorTorrent Metainfo InspectorChunked File PackagerEncrypted File VaultDuplicate File FinderArchive WorkbenchDesign Token ManagerSpacing Token DesignerResponsive Type SystemPackaging Dieline DesignerSVG Icon Sprite PackerFlex Layout PlaygroundCSS Grid PlaygroundRegex Equivalence LabMarkdown Repository AuditorLog Template MinerResponsive Layout AuditorEmail Template PreviewInternal Link GraphState Machine TesterPetri Net SimulatorGit History VisualizerCurl Request WorkbenchBinary Protocol DesignerHex File EditorBinary Patch WorkbenchFile Signature WorkbenchAPI Mock SandboxSchema Column MapperEvent Log SessionizerER Diagram DesignerTime Series Gap AuditorStratified Data SplitterData Lineage DesignerDecision Tree LabData Anonymization WorkbenchData Expectation RunnerJSON Schema ValidatorBasket Pattern AnalyzerRobots Policy TesterSEO HTML AuditorAccessibility Structure AuditorSyndication Feed WorkbenchIndexNow Payload BuilderCrawl Log AnalyzerCSP Policy WorkbenchSearch Performance AnalyzerCSV Formula Risk AuditorCORS Response SimulatorCache Header LabCookie Policy InspectorWeb Vitals Trace LabSitemap Health AuditorBatch File RenamerFile Manifest VerifierFolder Space MapFolder Difference ReviewerRoute Order OptimizerGeoJSON Map EditorPolygon Overlay LabCartographic Label PlacerSpatial Table JoinGeoJSON Topology AuditorGPX Track AnalyzerTrack Privacy RedactorCSV Table JoinCSV Pivot WorkbenchScientific Data ProfilerTabular Cleaning WorkbenchRecord ReconciliationData Dictionary BuilderCanonical Graph AuditorRedirect Plan TesterHTTP response and ping reference testBrowser and System InformationJSON ↔ YAML ConverterXML ↔ JSON ConverterHTML FormatterJavaScript MinifierMock Data Generator.gitignore GeneratorLicense GeneratorUser-Agent ParserPassword Strength CheckerCode to ImageXML FormatterHTTP Status Code LookupMIME Type LookupJS & SQL String EscapeIndent ConverterNumber Base ConverterUnicode Escape ConverterUnicode InspectorJSON Structure DiffMarkdown Table GeneratorBase64 EncoderJSON FormatterURL EncoderSQL FormatterCron Expression GeneratorRegex TesterUUID GeneratorHash GeneratorTimestamp ConverterJWT DecoderHTML Entity ConverterMarkdown PreviewMeta Tag GeneratorJSON ↔ CSVCase ConverterImage to Base64
Comments & questions