Use CSS ‘clip-path’ in your Gravity Forms color Picker choices
When it comes to creating visually appealing forms, the details matter, and JetSloth’s Gravity Forms Color Picker add-on offers a fantastic way to enhance user experience. But why stop at the default styles? By leveraging the CSS clip-path property, you can customize the appearance of your color picker choices to match your brand’s aesthetic and stand out from the crowd.
The clip-path property allows you to use CSS ‘clip-path’ in your Gravity Forms color Picker choices, giving your color options a modern twist that can elevate your forms. In this article, we’ll explore how to use clip-path to transform your Gravity Forms color picker choices into eye-catching elements that engage users and enhance your form’s overall look. Let’s dive in and unleash your creativity!
Tear Drop
Set your Image Choices theme to shadow-box and add the below CSS to your form or theme. It’s that easy! The main CSS changes here is adding the clip-path style but also some clean up to the original shadow-box theme. You can use Gravity Forms Code Chest by Gravity Wizz to add your CSS.
.cp-theme--shadow-box .color-picker-swatch{
background-color: transparent;
border: none;
box-shadow: none;
}
.cp-theme--shadow-box .color-picker-swatch-color {
clip-path: polygon(99.737% 63.952%, 99.737% 63.952%, 99.087% 69.757%, 97.206% 75.264%, 94.196% 80.399%, 90.158% 85.088%, 85.196% 89.258%, 79.411% 92.835%, 72.906% 95.746%, 65.783% 97.916%, 58.144% 99.272%, 50.091% 99.741%, 50.091% 99.741%, 42.039% 99.272%, 34.4% 97.916%, 27.277% 95.746%, 20.772% 92.835%, 14.987% 89.258%, 10.025% 85.088%, 5.987% 80.399%, 2.977% 75.264%, 1.096% 69.757%, 0.446% 63.952%, 0.446% 63.952%, 1.178% 58.229%, 3.256% 52.309%, 6.497% 46.223%, 10.722% 40.004%, 15.75% 33.686%, 21.401% 27.302%, 27.495% 20.882%, 33.85% 14.462%, 40.287% 8.073%, 46.625% 1.748%, 46.625% 1.748%, 47.188% 1.284%, 47.84% 0.922%, 48.56% 0.662%, 49.325% 0.505%, 50.112% 0.45%, 50.901% 0.498%, 51.668% 0.648%, 52.392% 0.902%, 53.049% 1.258%, 53.619% 1.717%, 53.619% 1.717%, 60.146% 8.115%, 66.688% 14.547%, 73.081% 20.986%, 79.16% 27.404%, 84.757% 33.775%, 89.708% 40.07%, 93.847% 46.262%, 97.009% 52.325%, 99.027% 58.23%, 99.737% 63.952%);
}
.cp-theme--shadow-box .color-picker-swatch-text-wrap {
justify-content: center;
}Abstract Shape
Set your Image Choices theme to circle and just like the previous example, add the CSS below to your form or theme.
.cp-theme--circle .color-picker-swatch-color-wrap {
border: none!important;
box-shadow:none;
border-radius:0;
clip-path: polygon(63.57% 99.944%, 63.57% 99.944%, 59.878% 99.49%, 56.838% 98.258%, 54.286% 96.443%, 52.06% 94.239%, 49.997% 91.84%, 47.934% 89.441%, 45.708% 87.237%, 43.156% 85.422%, 40.116% 84.19%, 36.424% 83.736%, 36.424% 83.736%, 31.608% 83.595%, 26.637% 83.144%, 21.667% 82.345%, 16.854% 81.159%, 12.354% 79.545%, 8.322% 77.464%, 4.915% 74.878%, 2.288% 71.747%, 0.598% 68.031%, 0% 63.692%, 0% 63.692%, 0.456% 60.018%, 1.694% 56.993%, 3.517% 54.454%, 5.732% 52.239%, 8.142% 50.187%, 10.552% 48.134%, 12.767% 45.919%, 14.59% 43.38%, 15.828% 40.355%, 16.284% 36.682%, 16.284% 36.682%, 16.426% 31.892%, 16.879% 26.947%, 17.682% 22.002%, 18.875% 17.213%, 20.497% 12.735%, 22.587% 8.723%, 25.187% 5.333%, 28.334% 2.719%, 32.068% 1.036%, 36.43% 0.441%, 36.43% 0.441%, 40.122% 0.895%, 43.162% 2.127%, 45.714% 3.942%, 47.94% 6.146%, 50.003% 8.545%, 52.066% 10.944%, 54.292% 13.148%, 56.844% 14.963%, 59.884% 16.195%, 63.576% 16.649%, 63.576% 16.649%, 68.39% 16.79%, 73.36% 17.241%, 78.33% 18.04%, 83.143% 19.226%, 87.644% 20.84%, 91.676% 22.921%, 95.084% 25.507%, 97.711% 28.638%, 99.402% 32.354%, 100% 36.694%, 100% 36.694%, 99.544% 40.367%, 98.306% 43.392%, 96.481% 45.931%, 94.266% 48.146%, 91.855% 50.198%, 89.444% 52.251%, 87.229% 54.466%, 85.405% 57.005%, 84.167% 60.03%, 83.711% 63.703%, 83.711% 63.703%, 83.567% 68.5%, 83.113% 73.449%, 82.31% 78.396%, 81.118% 83.184%, 79.496% 87.661%, 77.406% 91.67%, 74.809% 95.058%, 71.663% 97.669%, 67.93% 99.349%, 63.57% 99.944%);
}Blob Shape
Set your Image Choices theme to Pantone and just like the previous example, add the CSS below to your form or theme.
.cp-theme--pantone .color-picker-swatch-color {
box-shadow:none;
display: flex;
justify-content: center;
align-items: center;
}
.cp-theme--pantone .color-picker-swatch {
border-radius: 6px;
}
.cp-theme--pantone .color-picker-swatch-color-wrap {
width: 100%;
position: relative;
clip-path: polygon(34.458% 8.568%, 34.458% 8.568%, 36.839% 5.642%, 39.711% 3.367%, 42.951% 1.741%, 46.436% 0.766%, 50.044% 0.441%, 53.652% 0.766%, 57.137% 1.741%, 60.377% 3.367%, 63.249% 5.642%, 65.63% 8.568%, 65.884% 8.961%, 65.884% 8.961%, 66.928% 10.403%, 68.117% 11.722%, 69.441% 12.913%, 70.884% 13.97%, 72.434% 14.884%, 74.079% 15.649%, 75.806% 16.259%, 77.6% 16.707%, 79.45% 16.985%, 81.343% 17.088%, 81.845% 17.091%, 81.845% 17.091%, 85.818% 17.506%, 89.419% 18.632%, 92.585% 20.374%, 95.255% 22.635%, 97.368% 25.317%, 98.863% 28.324%, 99.678% 31.56%, 99.752% 34.927%, 99.023% 38.329%, 97.431% 41.669%, 97.183% 42.066%, 97.183% 42.066%, 96.334% 43.61%, 95.674% 45.208%, 95.202% 46.847%, 94.919% 48.513%, 94.825% 50.193%, 94.919% 51.872%, 95.202% 53.538%, 95.674% 55.177%, 96.334% 56.775%, 97.183% 58.319%, 97.431% 58.715%, 97.431% 58.715%, 99.023% 62.056%, 99.752% 65.458%, 99.678% 68.825%, 98.863% 72.061%, 97.368% 75.068%, 95.255% 77.75%, 92.585% 80.011%, 89.419% 81.753%, 85.818% 82.879%, 81.845% 83.294%, 81.343% 83.297%, 81.343% 83.297%, 79.45% 83.4%, 77.6% 83.678%, 75.806% 84.126%, 74.079% 84.736%, 72.434% 85.501%, 70.884% 86.415%, 69.441% 87.471%, 68.117% 88.663%, 66.928% 89.982%, 65.884% 91.423%, 65.63% 91.817%, 65.63% 91.817%, 63.249% 94.743%, 60.377% 97.018%, 57.137% 98.643%, 53.652% 99.619%, 50.044% 99.944%, 46.436% 99.619%, 42.951% 98.643%, 39.711% 97.018%, 36.839% 94.743%, 34.458% 91.817%, 34.204% 91.423%, 34.204% 91.423%, 33.16% 89.982%, 31.971% 88.663%, 30.647% 87.471%, 29.204% 86.415%, 27.654% 85.501%, 26.009% 84.736%, 24.282% 84.126%, 22.488% 83.678%, 20.637% 83.4%, 18.745% 83.297%, 18.243% 83.294%, 18.243% 83.294%, 14.27% 82.879%, 10.67% 81.753%, 7.504% 80.011%, 4.833% 77.75%, 2.72% 75.068%, 1.225% 72.061%, 0.41% 68.825%, 0.337% 65.458%, 1.065% 62.056%, 2.657% 58.715%, 2.905% 58.319%, 2.905% 58.319%, 3.754% 56.775%, 4.414% 55.177%, 4.886% 53.538%, 5.169% 51.872%, 5.263% 50.193%, 5.169% 48.513%, 4.886% 46.847%, 4.414% 45.208%, 3.754% 43.61%, 2.905% 42.066%, 2.657% 41.669%, 2.657% 41.669%, 1.065% 38.329%, 0.337% 34.927%, 0.41% 31.56%, 1.225% 28.324%, 2.72% 25.317%, 4.833% 22.635%, 7.504% 20.374%, 10.67% 18.632%, 14.27% 17.506%, 18.243% 17.091%, 18.745% 17.088%, 18.745% 17.088%, 20.637% 16.985%, 22.488% 16.707%, 24.282% 16.259%, 26.009% 15.649%, 27.654% 14.884%, 29.204% 13.97%, 30.647% 12.913%, 31.971% 11.722%, 33.16% 10.403%, 34.204% 8.961%, 34.458% 8.568%);
margin: 15px auto 0;
max-width: 150px;
}
.cp-theme--pantone .color-picker-swatch-color i {
bottom: unset;
right: unset;
}Resources
Check out some of the resources below to learn more about the clip-path CSS property and some great handy generator websites we used for this article and its demos.
| SVG to Clip Path generator | https://www.plantcss.com/css-clip-path-converter |
| Responsive Shapes | https://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/ |
| Web Docs | https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path |
| Clippy Generator | https://bennettfeely.com/clippy/ |
| Clip Path generator | https://10015.io/tools/css-clip-path-generator |
| Clip Path generator | https://www.cssportal.com/css-clip-path-generator/#google_vignette |
| Free SVG Shapes | https://shapes.framer.website/ |
What is the Clip-path CSS property
The clip-path property in CSS is a powerful feature that allows you to create complex shapes by defining a visible region of an element. Instead of displaying the entire element, clip-path lets you specify which parts of the element are visible, effectively “clipping” it to the defined shape.
Key Points about clip-path:
- Shapes: You can create a variety of shapes using clip-path, including basic geometric shapes (like circles, ellipses, rectangles, and polygons) as well as custom shapes defined by SVG paths.
- Syntax: The syntax for clip-path generally follows this structure:
clip-path: circle(50%); - Responsive Design: clip-path can be particularly useful in responsive design, as shapes can be defined in percentages relative to the element’s dimensions, making them adaptable to different screen sizes.
- Transitions and Animations: You can animate clip-path properties, allowing for creative transitions that can enhance user interactions. For example, you can change the shape on hover to create engaging effects.
- Browser Support: While most modern browsers support clip-path, it’s always good practice to check for compatibility, especially if you’re targeting a wide range of users.
Practical Applications:
- Custom Buttons: Use
clip-pathto create uniquely shaped buttons that stand out. - Image Masks: Clip images into interesting shapes to create visual interest in galleries or portfolios.
- Color Pickers: As mentioned, you can apply clip-path to the color picker choices in Gravity Forms to create visually engaging options.
In summary, the clip-path property offers a versatile way to manipulate the visual presentation of elements in CSS, allowing for creativity and customization in web design. By using it with tools like JetSloth’s Gravity Forms Color Picker, you can enhance user experience and make your forms visually striking.
Buy Gravity Forms Color Picker
Gravity Forms Color Picker
Let users select from a pre-defined set of swatches you make available or even let your users select a custom hex value from the color picker.
