generators
CSS Gradient
The ultimate CSS gradient generator with visual preview and code export.
#gradient#color#background
Built-in toolFree · No signup
CSS Media Query Builder
Build @media rules by combining conditions — min-width, max-width, orientation, prefers-color-scheme, prefers-reduced-motion, and more. Add multiple conditions with AND logic, or build separate breakpoint sets. The output shows both the @media rule and a ready-to-use CSS block.
Conditions
px
Generated @media rule
@media
screen and (min-width: 768px)How to use
01
Choose conditions
Toggle which conditions to include: min-width, max-width, orientation, dark mode preference, and more.
02
Set values
Enter pixel values for width conditions. Select orientation or preference values from the dropdowns.
03
Combine with AND
All active conditions are combined with 'and'. Use the breakpoint presets for common responsive targets.
04
Copy @media rule
Copy the complete @media rule with a placeholder CSS block ready to fill with your declarations.
More CSS layout tools
From our directory of 30+ CSS tools.
Know a great CSS tool?
Submit it to the directory and help developers discover it.