CSS Studio
Generate CSS gradients, box-shadows, glassmorphism, easing curves, and check WCAG contrast — copy code instantly.
Preview
CSS
background-image: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
Tailwind
bg-[linear-gradient(90deg,#6366f1_0%,#ec4899_100%)]
Controls
Type
Angle90°
Colour stops
- Stop 1 position0%
- Stop 2 position100%
CSS Studio FAQ
- How do I copy the generated CSS?
- Every code block has a Copy button: one click puts the CSS (or the Tailwind class) on your clipboard and the button confirms with "Copied". If your browser blocks clipboard access you get an error message and can select the code manually.
- Which CSS generators are included?
- Linear, radial and conic gradients with Tailwind output, layered box-shadows, glassmorphism cards, cubic-bezier easing curves with presets, and a WCAG contrast checker that also outputs the color and background-color declarations.
- How is the contrast ratio checked?
- It uses the WCAG 2.x relative-luminance formula. AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1. A colour-blindness simulation shows how the pair looks with common colour-vision deficiencies.
- Does the generated CSS work in all browsers?
- Gradients, box-shadow and cubic-bezier work in every modern browser. Glassmorphism relies on backdrop-filter, which is supported by current Chrome, Edge, Firefox and Safari; older browsers simply show the translucent background without blur.
- Are my colours or designs sent anywhere?
- No. Everything is generated in your browser. Nothing you enter is uploaded or stored on a server.